Forem

Anubhab Mukherjee
Anubhab Mukherjee

Posted on

2 2

Understanding Built In Angular Directives - Part 6

Today 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>
Enter fullscreen mode Exit fullscreen mode

ngSwitch is placed inside a container element like div. We need to assign a switchExpression 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

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>

Enter fullscreen mode Exit fullscreen mode

and now lets open the component.ts file and add the color variable and assign a value say 1 to it.

  color = 1;
Enter fullscreen mode Exit fullscreen mode

Now, once you run the application and open your browser in localhost:4200 you should see the below output

Image description

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay