Check out myAngular article series with live demos and Facebook group Angular - Advanced Topics

Ignoring Angular bindings

Torgeir "Tor" Helgevold
- JavaScript Developer and Blogger
Published: Mon Jun 29 2015

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.

If you liked this article, share it with your friends on social media:

We also have a new Facebook group about advanced Angular topics.

I invite you to follow me on twitter