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

Question

<p>Pattern Format (All Parameters are Optional):</p>
<p>{Parameter: 1, Parameter 2}</p>
Above is my code. the second line throws an 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.

Answer 1

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}"}}

Answer 2

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

Answer 3

Just add the #ngNonBindable directive to the element.