NgNonBindable Directive in Angular

In this article we'll see how to use the NgNonBindable directive.

Generally if you use any binding or directive with any element it is evaluated to the expression and render that evaluated expression. For example if you have a component to show user name-

non-bindable.component.ts

import { Component } from "@angular/core";

@Component({
    selector: 'non-bindable',
    templateUrl: './non-bindable.component.html',
})
export class NonBindableComponent{
    userName:String = 'TestUser'
}

non-bindable.component.html

<p>Hello {{ userName }}</p>

After compiling this code and running it you would see that the String interpolation {{ userName }} is evaluated to the assigned value and that’s what is rendered.

Deactivating Angular processing with NgNonBindable

By adding ngNonBindable to the host element you can stop bindings and prevent the expression evaluation. A good example is if you want to write some Angular code as it is, which is very helpful at least while writing technical articles!

In the above template one more line is added where ngNonBindable is added to the <p> element so that {{userName}} is displayed as it is.

<p>Hello {{ userName }}</p>
<p ngNonBindable>Here {{ userName }} is evaluated using string interpolation</p>

With that change that’s what you will see on the browser.

That's all for this topic NgNonBindable Directive in Angular. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

---

Related Topics

1. Directives in Angular
2. Angular ngStyle Directive With Examples
3. How to Use ngFor and ngIf on Same Element in Angular
4. How to Create a Custom Attribute Directive in Angular
5. How to Create a Custom Structural Directive in Angular

You may also like-

1. Angular @Output() Decorator With Examples
2. Location Strategies in Angular Routing
3. Custom Pipe in Angular With Example
4. Angular + Spring Boot JWT Authentication Example
5. Spliterator in Java
6. Association, Aggregation And Composition in Java
7. Spring Batch Processing Using JDBCTemplate batchUpdate() Method
8. Python continue Statement With Examples