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>

Answer 1

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> <p ngNonBindable>{{ date | date:'short'}}</p> .

AngularJS:

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

More Info: https://docs.angularjs.org/api/ng/directive/ngNonBindable#examples