Prevent angular from parsing {{ in template

Question

Is there a solution to force angular not to parse {{ }} ? I want to put some angular code i html template but angular is trying to parse it.

<![CDATA[ {{index}} ]]> - that is not working with aot

Answer 1

You can use ngNonBindable

https://codecraft.tv/courses/angular/built-in-directives/ngnonbindable

<span ngNonBindable> {{index}} </span>

Or you could also have a variable containing the text with curly braces

component.ts

public stringWithBraces = "{{index}}";

component.html

{{stringWithBraces}}

Or you could use quotes (but it's not very readable)

 {{ '{{' }}index  }}

Stackblitz demo