ngSwitch in Angular5 - Web Prepration

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

Webprepration

I’m a full-stack developer. My hobby and profession to write blog and programming tips that helps to others. I am a great admirer of PHP, Laravel, Codeigniter, AngularJS, Vue.js, Javascript, JQuery, WordPress, Plugin Development, Theme Development and Bootstrap from the early stage.

Reader Interactions

Leave a Reply Cancel reply