Posted by Arjun Arjun on Monday 14th August 2017, 1 minute read

Angular NgSwitch Directive

The NgSwitch directive lets you to insert different sets of elements into the document based on a specified value or expression.NgSwitch Directive resides inside CommonModule module, so you can import it as shown below

 import { NgSwitch } from '@angular/common';

[caption id="attachment_5297" align="aligncenter" ]Angular NgSwitch Directive [/caption]

How to use NgSwitch

In the below code, we are getting iterating over the items objects, to show the status of the current item we are using [ngSwith] expression.

{{ i + 1 }} {{ item.action }} Yes No

In the above example based on item.done property value, the nested span elements will be added to DOM.


I am Arjun from Hyderabad (India). I have been working as a software engineer from the last 7+ years, and it is my passion to learn new things and implement them as a practice. Aside from work, I like gardening and spending time with pets.