ngSwitch in Angular5

by

In this post, I am going to explain “How to use ngSwitch in Angular5”, ngSwitch used in angular same as other programming language. In this article I will be show example “How to use ngSwitch in Angular”.

ngSwitch

ngSwitch is actually comprised of two directives, an attribute directive and a structural directive. Its very similar to a switch statement in JavaScript and other programming languages, but in the template.

The ngSwitch directive lets you hide/show html element depending on expression

We can also define a default section, by using the ng-switch-default directive, to show a section if none of the other sections get a match.

Three things to keep in mind –ngSwitch, ngSwitchCase, ngSwitchDefault



Example:-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<ul *ngFor="let employee of employees" [ngSwitch]="employee.role">
  <li *ngSwitchCase="employee.role==='manager'"
      class="text-success">{{ employee.name }} ({{ employee.salary}})
  </li>
  <li *ngSwitchCase="employee.role=== 'developer'"
      class="text-primary">{{ employee.name }} ({{ employee.salary}})
  </li>
  <li *ngSwitchCase="employee.role=== 'designer'"
      class="text-danger">{{ employee.name }} ({{ employee.salary}})
  </li>
  <li *ngSwitchCase="employee.role === 'team_lead'"
      class="text-warning">{{ employee.name }} ({{ employee.salary}})
  </li>
  <li *ngSwitchDefault
      class="text-warning">{{ employee.name }} ({{ employee.salary}})
  </li>
</ul>
 

 

Thanks!!

Leave a Comment