Angular NgSwitch Directive

Last updated on September 3, 2017

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

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.

    
    
        
        
Description
Done
   
    
    
    
        
        
 
            
{{ 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.