How to escape single curly braces angular 4 template

Question

I have something like

<div ngNonBindable>
  yada yada.... { ... }  blah blah....
<div>

Even with 'ngNonBindable' directive I get error:

compiler.es5.js:1690 Uncaught Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
<div>

Two things:

1) Please point me in right direction.

2) Or, a workaround please.

I wanna keep the 'ngNonBindable' , cause I am gonna add other stuff which require it ;-} — zion inc, Aug 10 '17 at 16:56
The suggested syntax after "use" in the error is absolute madness, and unreadable. — Rin and Len, May 22 '23 at 09:14

suhailvs · Answer 1 · 2020-02-26T08:34:30.853

29

You can use Special Character for { --> { and for } --> }

<div>
  yada yada.... &#123; ... &#125;  blah blah....
<div>

edited Feb 26 '20 at 08:34

answered Jan 28 '19 at 11:03

suhailvs

20,182
14
100
98

1

yes but only one. If you add two, the angular compiler interprets it as `{{ }}` sadly – Nico Nov 08 '20 at 20:42

John Montgomery · Accepted Answer · 2017-08-10T17:09:15.820

You can bind the text to a string literal:

<div>
  {{"yada yada.... { ... }  blah blah...."}}
<div>

(if the text also has quote marks in it, you can escape them with \)

Edit: just saw your comment that you need to keep ngNonBindable. It looks like there's an open issue for that, so until that's fixed you may need to see if you can restructure your markup to remove the escaped text from the ngNonBindable section.

score 5 · Answer 3 · answered Feb 13 '18 at 09:11

5

<div>
  yada yada.... {{ '{' }} ... {{ '}' }}  blah blah....
<div>

there is a open bug for ngNonBindable

answered Feb 13 '18 at 09:11

Toolkit

10,779
8
59
68

How to escape single curly braces angular 4 template

3 Answers3

Linked