Understanding Built In Angular Directives - Part 6
Tags: angular, beginners, webdev, tutorial
Published: 2021-12-30 10:42:21

**T**oday we will understand the last built in directive provided by the Angular Team - `ngSwitch`.

`*ngSwitch`
ngSwitch is also a structural directive. The use case is same as the switch statement of JavaScript but only at the template side.

**The Syntax**
```
<container-element [ngSwitch]="switchExpression">
   <child-element *ngSwitchCase="matchExpression.1">
     content
   </child-element>
   <child-element *ngSwitchCase="matchExpression.N">
     content
   </child-element>
   <child-element *ngSwitchDefault>
     content
   </child-element>
</container-element>
```

---

`ngSwitch` is placed inside a container element like `div`. We need to assign a <u>switchExpression</u> to the `ngSwitch` using property binding syntax (`[ngSwitch]="switchExpression"`).
The switch-expression value is evaluated at runtime by Angular and accordingly displays or removes elements from the DOM.

`ngSwitchCase` is placed in an inner child element, which is placed inside the `container-element`. If you have noticed we use * in front of ngSwitchCase because its a structural directive. We also assign a **match expression** which is evaluated at runtime.
The child-element is displayed only if the `match expression` and `switch expression` matches, else it will be removed from DOM.

> ngSwitchCase does not hide the element, but it removes them from the DOM

`ngSwitchDefault` is also placed in an inner child element which must be placed inside the container element. An important thing to note is it DOES NOT have any match expression. If none of the ngSwitchCase match expression matches the switch expression then the default is is shown.
**Note**
We can add `ngSwitchDefault` **anywhere** inside the container element (not necessary at the very end)

We can add as many `ngSwitchDefault` as we want. If none of the condition matches all the default elements will be displayed.

`ngSwitchDefault` is also a directive.

---

Now lets see how the ngSwitch directive actually works.

Lets open the component template file -

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f06elgawwh4wkbun2z0l.PNG)

and paste in the below code-

```
<ul [ngSwitch]="color">
  <li *ngSwitchCase="'1'">RED</li>
  <li *ngSwitchCase="'2'">GREEN</li>
  <li *ngSwitchCase="'3'">BLUE</li>
  <li *ngSwitchCase="'4'">ORANGE</li>
  <li *ngSwitchDefault>RAINBOW</li>
</ul>
 
```
and now lets open the component.ts file and add the `color` variable and assign a value say **1** to it.

```
  color = 1;
```
Now, once you run the application and open your browser in localhost:4200 you should see the below output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07tx7ukpbdyx63lzv0a6.PNG)

Now if you change the value of the color variable to say 20 which is not present in the matchExpression you should see the output as RAINBOW.

**Challenge Section** 
You should try to use 2 ngSwitchDefault in your code and check for the output.

Hope you enjoyed the post, if yes please do like and comment.
Stay tuned for more Angular topics.

**Cheers**!!!
_Happy Coding_