Escaping an Angular Template expression for display in an Angular HTML Component Template?

Question

If we are writing documentation within an Angular App is there a way to escape:

<p>{{ date | date :'short'}}</p>

So that it does not execute and instead renders as:

{{ date | date :'short'}}

Most sample documentation I've read through will put a span element around the individual pieces like this:

<span class="pun">{{</span>

Does angular have a syntax highlighting pipe that we can pass the expression through?

In AngularJS it's done like this:

 <div ng-non-bindable>Ignored: {{1 + 2}}</div>

user823447 · Accepted Answer · 2019-10-09 20:11:41Z

2

Use the ng-non-bindable/ngNonBindable attribute to indicate Angular shouldn't compile the contents of that DOM element.

Angular 8:

In your case, the new code would look like <p ngNonBindable>{{ date | date :'short'}}</p>.

AngularJS:

In your case, the new code would look like <p ng-non-bindable>{{ date | date :'short'}}</p>.

answered Oct 7, 2019 at 1:38

user823447

1482 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Turns out this is for AngularJS. Do you know what the corresponding version for Angular 8 is?

It should be ngNonBindable then. Check out ngrefs.com/latest/templates/ngnonbindable. @Ole