In the tutorial, we show how to use Angular NgIf directive to add or remove an element from the DOM by evaluating the expression and then renders the then or else template.
Related posts:
– Angular 6 – NgFor Repeater Directive – Loop over a Collection
Contents
Technologies
- Node.js – version v10.4.0
- Angular – version 6
- Visual Studio Code – version 1.24.0
Angular NgIf
Preparation
We create an Angular 6 project as below structure:
– Generate Angular Project:
– Generate NgIfComponent :
– Now, add selector tag app-ng-if of NgIf component to app.component.html.
NgIf Common Usage
Syntax:
1 2 | - <div *ngIf="condition">...</div> - <ng-template [ngIf]="condition"><div>...</div></ng-template> |
Practice :
-> Modify NgIfComponent class as below:
1 2 3 4 5 6 7 8 9 | import { Component } from '@angular/core'; @Component({ selector: 'app-ng-if', template: `<div *ngIf="show">Text to show</div>` }) export class NgIfComponent{ show:boolean = true; } |
-> result:
We got the same result if using [ngIf] syntax:
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { Component } from '@angular/core'; @Component({ selector: 'app-ng-if', template: `<ng-template [ngIf]="show"> <div> Text to show </div> </ng-template>` }) export class NgIfComponent{ show:boolean = true; } |
If we change show:boolean = false then Angular will not render the text: ‘Text to show ‘.
NgIf Else
Angular provides the else statement to control the render flow inside a component’s template.
Syntax:
1 2 | <div *ngIf="condition; else elseBlock">...</div> <ng-template #elseBlock>...</ng-template> |
Practice:
-> Modify NgIfComponent class as below:
1 2 3 4 5 6 7 8 9 10 | import { Component } from '@angular/core'; @Component({ selector: 'app-ng-if', template: `<div *ngIf="show; else elseBlock">Text to show</div> <ng-template #elseBlock>Alternate text when <code>show = false</code></ng-template>` }) export class NgIfComponent{ show:boolean = true; } |
– When show = true , result:
– When show = false, result:
We also can achieve above result with [ngIfElse] syntax:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import { Component } from '@angular/core'; @Component({ selector: 'app-ng-if', template: `<ng-template [ngIf]="show" [ngIfElse]="elseBlock"> <div> Text to show </div> </ng-template> <ng-template #elseBlock> <div> Alternate text when <code>show =false </div> </ng-template>` }) export class NgIfComponent{ show:boolean = false; } |
NgIf Then Else
Angular provides then statement that helps move initial *ngIf template, to outside of the binding element.
-> Syntax:
1 2 3 | <div *ngIf="condition; then thenBlock else elseBlock"></div> <ng-template #thenBlock>...</ng-template> <ng-template #elseBlock>...</ng-template> |
Practice:
-> Modify NgIfComponent class as below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import { Component } from '@angular/core'; @Component({ selector: 'app-ng-if', template: `<div *ngIf="show; then thenBlock; else elseBlock"> </div> <ng-template #thenBlock> Text to show </ng-template> <ng-template #elseBlock> Alternate text when <code>show = false </ng-template>` }) export class NgIfComponent{ show:boolean = true; } |
– When show = true , result:
– When show = false, result:
We also can achieve above result with [ngIfThen] syntax:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import { Component } from '@angular/core'; @Component({ selector: 'app-ng-if', template: `<ng-template [ngIf]="show" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock"> </ng-template> <ng-template #thenBlock> Text to show </ng-template> <ng-template #elseBlock> Alternate text when <code>show = false </ng-template>` }) export class NgIfComponent{ show:boolean = true; } |
NgIf with Observables and Async
Storing Value Locally
Syntax:
1 2 | <div *ngIf="condition as value; else elseBlock">{{value}}</div> <ng-template #elseBlock>...</ng-template> |
Practice:
-> Modify NgIfComponent class as below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | import { Component } from '@angular/core'; @Component({ selector: 'app-ng-if', template: `<div *ngIf="CUSTOMERS as customers; else elseBlock"> <ul> <li *ngFor="let customer of customers"> {{ customer | json }} </li> </ul> </div> <ng-template #elseBlock> Alternate text when customers is undefined </ng-template>` }) export class NgIfComponent{ CUSTOMERS: Customer[] = [ {id: 1, firstname: 'Mary', lastname: 'Taylor', age: 24}, {id: 2, firstname: 'Peter', lastname: 'Smith', age: 18}, {id: 3, firstname: 'Lauren', lastname: 'Taylor', age: 31} ]; } class Customer { id: number; firstname: string; lastname: string; age: number } |
-> Result:
NgIf with Observables and Async
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | import { Component } from '@angular/core'; import { Observable, of } from 'rxjs'; @Component({ selector: 'app-ng-if', template: `<div *ngIf="observableCustomers | async as customers; else elseBlock"> <ul> <li *ngFor="let customer of customers"> {{ customer | json }} </li> </ul> </div> <ng-template #elseBlock> Alternate text when customers is undefined </ng-template>` }) export class NgIfComponent{ CUSTOMERS: Customer[] = [ {id: 1, firstname: 'Mary', lastname: 'Taylor', age: 24}, {id: 2, firstname: 'Peter', lastname: 'Smith', age: 18}, {id: 3, firstname: 'Lauren', lastname: 'Taylor', age: 31} ]; observableCustomers: Observable<Customer[]> = of(this.CUSTOMERS); } class Customer { id: number; firstname: string; lastname: string; age: number } |
SourceCode
How to run the below sourcecode:
1 2 3 | 1. Download Angular-6-NgFor.zip file -> Then extract it to Angular-6-NgFor folder. 2. Go to Angular-6-NgFor folder 3. Run the app by commandline: ng serve --open |
-> Source Code: