ng switch in Angular

AngularngSwitch

Let us check how ngSwitch works in Angular. Basically it is almost similar to Angular js 1 except some syntax changes. Let us check how it is in Angular js 1 first.

ng-switch in Angular js 1

---

$scope.data = data; // json or backend data

<div ng-switch="data.status">
 
 <span ng-switch-when="C">Initializing</span>
 
 <span ng-switch-when="J">Loading</span>
 
 <span ng-switch-when="R">Creating</span>
 
 <span ng-switch-when="D">Success</span>
 
 <span ng-switch-when="P">Failed</span>

</div>

Now let us check how it is in Angular 4.

ngSwitch in Angular 4

---

this.data = data; // json or backend data

<div [ngSwitch]="data.status">
 
 <span *ngSwitchCase="'C'">Initializing</span>
 
 <span *ngSwitchCase="'J'">Loading</span>
 
 <span *ngSwitchCase="'R'">Creating</span>
 
 <span *ngSwitchCase="'D'">Success</span>
 
 <span *ngSwitchCase="'P'">Failed</span>
 
 <span *ngSwitchDefault>Error</span>

</div>

In this article we have discussed about using ngSwitch in Angular.

AngularngSwitch

Related Info

1. ng if in Angular 4.

2. ng if in Angular 2.

3. ng repeat in Angular.

4. ng click in Angular.