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>
  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>
  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.