Uses of Hidden, ngNonBindable directive? How to display HTML data in Angular Template

In my last article I discussed on build in directive NgSwitch, NgStyle, NgClass.  In these article i discuss on hidden, ngNonBindable & HTML print in template.

    1. Hidden Directive:  Conditionally add/remove an element form the element. Its same like *ngIf but main difference between “Hidden”  its just hide element not removed from the DOM but in *ngIf it removes form the DOM element.
      Syntax: [hidden]=”conditions”

      <h2 [hidden]="islogin">Angular2 Project</h2>
       <h2 [hidden]="!islogin">Hide Menu</h2>

      In above example when condition satisfy at that time that hide element from the DOM.

    2. ngNonBindable Directive: When ever we use this directive it tells Angular not to bind or not to compile.
      Syntax: <h2 ngNonBindable>{{name}}</h2>
      Example:

      <div> Name Person : <span>{{name}}</span></div>

      when ever above code run it find the name variable in the class and display its binding value of the person. but if we just want to display above sentence as angular syntax then we need to us “ngNonBindable” direactive in span so it will display “{{name}}”

      <div> Name Person : <span ngNonBindable>{{name}}</span></div>


    3. [innerHTML] Directive: when we have to display HTML display from the Angular at that time we have use this directive.
      Normally we uses {{property}} for interpolation of values.  That is the way that you would display plain text in your element.
      Example:

      export class HtmlComponent {
       displayStr: string = '<strong>Good Manners</strong> Helpful Our Betterment';
      }
      <div>{{displayStr}}</div>

      It display on the html sting as output

      <div [innerHTML]="displayStr"></div>

      Now it converts output in html like below

Spread the love
  • 31
  •  
  •  
  •  
  •  
  •  
  •  
  •