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 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:

&#123;&#123;person.name}}

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

If you are willing to go with another delimiter altogether (such as `[[ ]]`): http://stackoverflow.com/questions/12923521/angular-js-custom-delimiter — Thilo, Jun 01 '13 at 01:06
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, Jun 01 '13 at 01:08
possible duplicate of [Prevent double curly brace notation from displaying momentarily before angular.js compiles/interpolates document](http://stackoverflow.com/questions/12866447/prevent-double-curly-brace-notation-from-displaying-momentarily-before-angular-j) — Maxime Lorant, Nov 09 '14 at 16:13
@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, Nov 11 '14 at 03:14

score 160 · Accepted Answer · edited Mar 13 '18 at 16:27

160

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

Documentation @ ngNonBindable

edited Mar 13 '18 at 16:27

Magda Stożek

21
5

answered Jun 01 '13 at 01:44

Mike Pugh

6,787
2
27
25

7

You could also use
or whatever tag, just add ng-non-bindable
– Mike Pugh Jun 01 '13 at 01:46
5

what if the `{{value}}` is inside of an input tag value? – Timo Huovinen Aug 21 '15 at 12:15
@TimoHuovinen, to output curly braces in an HTML *attribute* see [my answer](http://stackoverflow.com/a/37473892/99777). – joeytwiddle May 27 '16 at 02:34
@TimoHuovinen You can use `ng-non-bindable` in container element, you can see my answer: http://stackoverflow.com/a/42511222/1407491 – Nabi K.A.Z. Feb 28 '17 at 14:44
This doesn't work presently; using Angular 8. @joeytwiddle 's answer did however. – J E Carter II Aug 29 '19 at 14:36
tested on ng13 ,does not work.probably deprecated – Avi E. Koenig Jan 20 '22 at 07:56
@JECarterII This question was for angularjs. For angular, try [ngNonBindable](https://angular.io/guide/attribute-directives#deactivating-angular-processing-with-ngnonbindable) like [this](https://stackblitz.com/edit/angular-cwr4np?file=src%2Fmain.ts) `
Hello, {{name}}
` – Jason Goemaat Jun 29 '23 at 13:52

bh_earth0 · Answer 2 · 2015-02-17T12:31:06.683

31

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

edited Feb 17 '15 at 12:31

answered Feb 16 '15 at 23:26

bh_earth0

2,537
22
24

Gives me a `Lexer Error` – Jason Goemaat Feb 16 '15 at 23:34
1

{{ '{{' asd '}}' }} what about his – bh_earth0 Feb 16 '15 at 23:40
4

This is a late answer to a question with an accepted answer. If you choose to provide a new answer, you should take extra precautions to make sure the solution works, and should provide compelling reasons why this answer is preferred to the widely accepted answer. Also, this doesn't directly answer the question anyway. – Claies Feb 17 '15 at 01:14
Like for this one `{{...}}`. – ROMANIA_engineer Sep 05 '19 at 12:40

joeytwiddle · Answer 3 · 2016-05-27T02:36:26.987

14

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.

edited May 27 '16 at 02:36

answered May 27 '16 at 02:30

joeytwiddle

29,306
13
121
110

Works (as recently as angular 8). – J E Carter II Aug 29 '19 at 14:37

score 9 · Answer 4 · answered Feb 20 '20 at 21:28

9

Updated for Angular 9

Use ngNonBindable to escape interpolation binding.

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

answered Feb 20 '20 at 21:28

Matt

33,328
25
83
97

score 4 · Answer 5 · answered Jun 27 '20 at 08:00

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.

score 3 · Answer 6 · answered Feb 28 '17 at 14:21

3

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>

answered Feb 28 '17 at 14:21

Nabi K.A.Z.

9,887
6
59
81

score 3 · Answer 7 · answered Sep 14 '17 at 11:57

3

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

answered Sep 14 '17 at 11:57

EscapeNetscape

2,892
1
33
32

score 0 · Answer 8 · answered Sep 29 '20 at 07:55

0

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

answered Sep 29 '20 at 07:55

user369142

2,575
1
21
9

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

8 Answers8

Linked

Related