Stop compile or bind the contents of the current DOM element in Angular

Updated on July 20, 2020     Kisan Patel

How to stop compile or bind the contents of the current DOM element in Angular?

The ngNonBindable tells Angular not to compile or bind the contents of the current DOM element. Source.

app.component.ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
}

app.component.html

<h1>{{name}}</h1> 
<h1 ngNonBindable>{{name}}</h1>
// will print 
//Angular 10 {{name}}