Angular 8 ngIf Directive

by Online Tutorials Library July 22, 2022

Angular 8 ngIf Directive

The ngIf Directives is used to add or remove HTML Elements according to the expression. The expression must return a Boolean value. If the expression is false then the element is removed, otherwise element is inserted. It is similar to the ng-if directive of AngularJS.

ngIf Syntax

  <p *ngIf=”condition”>      condition is true and ngIf is true.  </p>  <p *ngIf=”!condition”>      condition is false and ngIf is false.  </p>  

The *ngIf directive form with an “else” block

  <div *ngIf=”condition; else elseBlock”>  Content to render when condition is true.  </div>  <ng-template #elseBlock>  Content to render when condition is false.  </ng-template>  

The ngIf directive does not hide the DOM element. It removes the entire element along with its subtree from the DOM. It also removes the corresponding state freeing up the resources attached to the element.

The *ngIf directive is most commonly used to conditionally show an inline template. See the following example:

  @Component({    selector: ‘ng-if-simple’,    template: `      <button (click)=”show = !show”>{{show ? ‘hide’ : ‘show’}}</button>      show = {{show}}      <br>      <div *ngIf=”show”>Text to show</div>  `  })  export class NgIfSimple {    show: boolean = true;  }  

Same template example with else block

  @Component({    selector: ‘ng-if-else’,    template: `      <button (click)=”show = !show”>{{show ? ‘hide’ : ‘show’}}</button>      show = {{show}}      <br>      <div *ngIf=”show; else elseBlock”>Text to show</div>      <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>  `  })  export class NgIfElse {    show: boolean = true;  }  

Next TopicAngular 8 ngFor Directive

add angular 8 form validation advantages of angular 8 angular angular 7 angular 7 vs angular 8 angular 8 angular 8 components angular 8 delete the data angular 8 environment setup angular 8 files explanation angular 8 first app angular 8 history angular 8 installation angular 8 introduction angular 8 project angular 8 tutorial angular 8 versions angular cli workflow angular server bootstrap form directives features of angular 8 how to create angular navigation how to install angular 8 how to upgrade angular older versions to angular 8 install angular routing progress indicator install bootstrap 4 css framework mongodb server ngclassdirective ngfor directive ngif directive ngstyle directive node.js server

Angular 8 ngIf Directive

Angular 8 ngIf Directive

ngIf Syntax

The *ngIf directive form with an “else” block

Same template example with else block

Programs List-Circular Linked | Programming Examples

Agent Environment in AI

You may also like