How do I escape curly braces for display on page when using AngularJS?

Question

I want the user to see double curly braces, but Angular binds them automatically. This is the opposite case of this question where they want to not see curly braces used fo

Answer 1

Use ng-non-bindable in container, this is effective on all element inside here container.

<div ng-non-bindable>
  <span>{{person.name}}</span>
  <img src="#" alt="{{person.name}}">
  <input placeholder="{{person.name}}">
</div>

Answer 2

<span>{{</span>{{variable.name}}<span>}}</span>

Answer 3

I wanted single brackets across text and the above solutions didn't work for me. So did want the Angular recommended.

Angular Version: 5

Required Text: My name is {person.name}.

<span>My name is {{'{'}}person.name{{'}'}}.</span>

I hope it helps someone.

Answer 4

In our case we wanted to present curly brackets in a placeholder, so they needed to appear inside an HTML attribute. We used this:

 <input placeholder="{{ 'Hello {' + '{person.name}' + '}!' }}" ...>

As you can see, we are building up a string from three smaller strings, in order to keep the curly braces separated.

'Hello {' + '{person.name}' + '}!'

This avoids using ng-non-bindable so we can continue to use ng- attributes elsewhere on the element.

Answer 5

<code ng-non-bindable>{{person.name}}</code>

Documentation @ ngNonBindable

Answer 6

From Angular compiler:

Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

So in the original question - you would end up with:

My name is {{ '{' }}{{ '{' }}person.name{{ '}' }}{{ '}' }}