ngSwitch in Angular5

By Webprepration December 29, 2018 Angular, Others 0 Comments

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


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

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

Tags:Angular, Angular 5, angular directives, angular5 component, Angular6, NgSwitch

ngSwitch in Angular5

About Author

Webprepration

Add a Comment

Related Posts

About Author

Webprepration

Add a Comment