ngSwitch in Angular5
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!!