Conditional Built-In Directives Like NgIf And NgSwitch - Angular

Loading

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

<div *ngIf="false"></div>
<div *ngIf="a > b"></div>
<div *ngIf="str == 'yes'"></div>
<div *ngIf="myFunc()"></div>

Forms of NgIf

There are various forms of NgIf as mentioned following,

Example of simple form with shorthand,

<div *ngIf="false"></div>

Example of simple form with expanded,

<ng-template [ngIf]="a > b"><div>Content to render when a > b</div></ng-template>

Example of form with an "else" block,

<ng-template [ngIf]="members" [ngIfElse]="loading">
<div class="member-list">
...
</div>
</ng-template>
<ng-template #loading>
<div>Loading...</div>
</ng-template>

OR Shorthand form,

<div class=" member -list" *ngIf="members else loading">
...
</div>
<ng-template #loading>
<div>Loading...</div>
</ng-template>

Example of shorthand form with "then" and "else" blocks,

<div *ngIf="a > b; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when a > b is true.</ng-template>
<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

<div class="container" [ngSwitch]="myVar">
<div *ngSwitchCase="'A'">Var is A</div>
<div *ngSwitchCase="'B'">Var is B</div>
<div *ngSwitchCase="'C'">Var is C</div>
<div *ngSwitchDefault>Var is something else</div>
</div>

Summary

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