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

101
votes

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 for binding when the page is loading.

I want the user to see this:

My name is {{person.name}}.

But Angular replaces {{person.name}} with the value. I thought this might work, but angular still replaces it with the value:

{{person.name}}

Plunker: http://plnkr.co/edit/XBJjr6uR1rMAg3Ng7DiJ

8
angularjs
If you are willing to go with another delimiter altogether (such as [[ ]]): stackoverflow.com/questions/12923521/… - Thilo
Thanks, I saw that but the whole point is really for a sample page showing how the braces work and I want viewing the source to be able to look exactly like what's on the page showing the sample if that makes sense. - Jason Goemaat
possible duplicate of Prevent double curly brace notation from displaying momentarily before angular.js compiles/interpolates document - Maxime Lorant
@MaximeLorant That is a completely different issue to do with preventing the momentary display of curly braces when the page is loading, this question is about getting them TO display even after the page has loaded and to prevent angular from binding them. - Jason Goemaat

8 Answers

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

Documentation @ ngNonBindable

31
votes

Edit: adding \ slash between brackets inside the quotes works

{{  "{{ person.name }\}"   }}

this too .. by passes angular interpreting

{{ person.name }<!---->}

this too .. 

{{ person.name }<x>} 

{{ person.name }<!>}
12
votes

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.

4
votes

Updated for Angular 9

Use ngNonBindable to escape interpolation binding.

<div ngNonBindable>
  My name is {{person.name}}
</div>
3
votes

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>
3
votes
<span>{{</span>{{variable.name}}<span>}}</span>
1
votes

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.

0
votes

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{{ '}' }}{{ '}' }}