Post
Ask Question

Conditional Built-In Directives Like NgIf And NgSwitch - Angular

Introduction

 
In this article, you will see the Conditional Built-in Directives like NgIf and NgSwitch in Angular along with the examples.
 
Article Overview
  • Background
  • Prerequisites
  • NgIf
  • Forms of NgIf
  • NgSwitch
  • Summary 

Background

  • Build-in directives are attributes which we add to HTML element to give dynamic behaviour.
  • Angular provides various built-in directives.
  • In this article we’re going to cover conditional directives such as NgIf and NgSwitch along with examples of how to use them. 
Prerequisites 
  • You should have a basic knowledge of Angular. 

NgIf

  • ngIf directive is used to display or hide an element based on a condition.
  • The condition is determined by the result of expressions which we pass into the directive.
  • If the result of the expression is true, the element will not be removed from the DOM.
  • If the result of the expression is false, the element will be removed from the DOM. 
Examples
  1. <div *ngIf="false"></div> <!-- never displayed -->  
  2. <div *ngIf="a > b"></div> <!-- displayed if a is more than b -->  
  3. <div *ngIf="str == 'yes'"></div> <!-- displayed if str is the string "yes" -->  
  4. <div *ngIf="myFunc()"></div> <!-- displayed if myFunc returns truthy -->  

Forms of NgIf

 
There are various forms of NgIf as mentioned following,
 
Example of simple form with shorthand,
  1. <div *ngIf="false"></div> <!-- never displayed -->  
Example of simple form with expanded,
  1. <ng-template [ngIf]="a > b"><div>Content to render when a > b</div></ng-template>  
Example of form with an "else" block,
  1. <ng-template [ngIf]="members" [ngIfElse]="loading">  
  2.     <div class="member-list">  
  3.      ...  
  4.     </div>  
  5. </ng-template>  
  6.   
  7. <ng-template #loading>  
  8.     <div>Loading...</div>  
  9. </ng-template>  
OR Shorthand form,
  1. <div class=" member -list" *ngIf="members else loading">  
  2.      ...  
  3. </div>  
  4.   
  5. <ng-template #loading>  
  6.      <div>Loading...</div>  
  7. </ng-template>  
Example of shorthand form with "then" and "else" blocks,
  1. <div *ngIf="a > b; then thenBlock else elseBlock"></div>  
  2. <ng-template #thenBlock>Content to render when a > b is true.</ng-template>  
  3. <ng-template #elseBlock>Content to render when a > b is false.</ng-template> 

NgSwitch

  • A switch is usually more efficient than a set of nested ifs.
  • ngSwitch directive is used to bind element with DOM based on a matching condition. 
  • ngSwitchCase directive is used describes the known results.
  • ngSwitchDefault is used to handle all the other unknown cases. 
Note
  • Every view that matches is rendered.
  • If there are no matches, a view with the ngSwitchDefault directive is rendered.
  • If there are no matches, and there is no ngSwitchDefault directive than nothing is rendered.  
Example 
  1. <div class="container" [ngSwitch]="myVar">  
  2. <div *ngSwitchCase="'A'">Var is A</div>  
  3. <div *ngSwitchCase="'B'">Var is B</div>  
  4. <div *ngSwitchCase="'C'">Var is C</div>  
  5. <div *ngSwitchDefault>Var is something else</div>  
  6. </div>   

Summary

 
Now I believe you should understand the key important things about Built-in Directives, NgIf, and NgSwitch in Angular.


Similar Articles