How I can use curly braces inside a div element in Angular?-CodePudding

<p>Pattern Format (All Parameters are Optional):</p>
<p>{Parameter: 1, Parameter 2}</p>

Above is my code. the second line throws error because I'm using curly braces in Angular. the error goes away if I use '(' braces.

But I want the curly braces printed. What can I do so that I get the following result in the web UI? -

Pattern Format (All Parameters are Optional):

{Parameter: 1, Parameter 2}

P.S: I want to print the curly braces I'm not trying string interpolation

CodePudding user response：

Values inside tags must be interpolated, which means surrounded by double curly braces {{ YOUR_VALUE }}.

You can take a look at official documentation to see if it can help your case, since it's not very clear what are you trying to do.

Guide to interpolation: https://angular.io/guide/interpolation

If you are trying to write it down you can try with:

{{"{Parameter: 1, Parameter 2}"}}

CodePudding user response：

Try this:

<div>
   {{"{Parameter: 1, Parameter 2}"}}
</div>

CodePudding user response：

Please check this solution, I hope it will solve your problem.

<span>{{'{'}} {{Parameter:1, Parameter 2}} {{'}'}}.</span>

Its output will be as:

{ParameterValue1, ParameterValue2}

If you want to display single bracess { only instead of variable, you can use ng-non-bindable. The ngNonBindable directive tells AngularJS not to compile or bind the contents of the current DOM element, including directives on the element itself that have a lower priority than ngNonBindable. Example

<div>Normal: {{1   2}}</div>
<div ng-non-bindable>Ignored: {{1   2}}</div>

Output of above will be:

Normal: 3
Ignored: {{1   2}}

When use ngNonBindable it will ignore parentheses in DOM element.

See Documentation ngNonBindable