Angular includes a directive that tells Angular to not compile or evaluate bindings in the contents of a specified DOM element. In this simple example I will demo how to wire this up.

Ignoring bindings is probably something you seldom want to do, but one potential use case is printing code snippets. It may also be of use if you happen to import non Angular html where the content overlaps with Angular syntax.

The following code sample defines a component with ignored bindings:

import {Component} from '@angular/core'; @Component({ selector: 'ignore-bindings', templateUrl: './components/non-bindable/non-bindable.html' }) export class IgnoreBindings { }

<div>Ignored Binding: <div ngNonBindable>{{10 * 10}}</div> </div> <div>Executed Binding: <div>{{10 * 10}}</div> </div>

As you can tell the key is to specify the ngNonBindable attribute on any element you want ignored by Angular. Instead of evaluating the expression and printing 100 - the output of the first expression will be {{10 * 10}}. The second expression will execute as a regular Angular expression, and print 100, since it doesn't contain the ngNonBindable attribute.

I have added this sample code to my Github repo.

You can also see a live demo here.