What is NgSwitch in Angular [A Step-by-step Guide]

Surely you’ve heard of the switch clause in general programming languages like C and C++. It’s a flow control statement that executes one block of code among many. Angular uses something similar. This brief article on Angular NgSwitch will tell you what the Angular NgSwitch directive does, with a simple demo to show its working. 

In this video, we will learn about what UiPath is, its Architecture, and working with the help of a simple demo. UiPath is a Robotic Process Automation (RPA) tool for large-scale end-to-end automation. This tutorial will help you understand the UiPath components and UiPath architecture in detail. In the end, we have added information about companies hiring UiPath developers and their salary trends.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

What is Angular NgSwitch? 

The NgSwitch directive specifies an expression to match against. The NgSwitchCase directive defines the expressions to match.

• It renders every view that matches.
• If there are no matches, the view with the NgSwitchDefault directive is rendered.
• Elements outside of any NgSwitchCase or NgSwitchDefault directive but within the NgSwitch statement but are preserved at the location.

A Step-by-Step Guide to NgSwitch 

Now that you know what the NgSwitch directive does, let’s look at a simple demo explaining the same.

UseCase - To display a message according to the day of the week. 

Step 1 - Create a component in your Angular App folder using the command. 

ng g c <name_of_component> 

The component that was created is called newcomp.

Step2 - In the newcomp.ts file, create a day property that stores the current day of the week. 

export class NewcompComponent implements OnInit {

  constructor() { }

  public day = new Date().getDay()

    ngOnInit(): void {

  }

}

The getDay() method returns a digit corresponding to the days of the week. It returns 0 for Sunday, 1 for Monday, and so on. 

Step 3 - In the newcomp.html file, use the NgSwitch directive to display messages according to the value stored in the day property. 

<h1>Hey! Good Morning </h1>

<div [NgSwitch] = "day">

<div *NgSwitchCase = 0>Today is Sunday! You deserve a break</div>

<div *NgSwitchCase = '1'><h3>Today is Monday, Hope you have productive Week</h3></div>

<div *NgSwitchCase = '2'><h3>Today is Tuesday, Smash your Goals</h3></div>

<div *NgSwitchCase = '3'><h3>Today is Wednesday, You're already half way through</h3></div>

<div *NgSwitchCase = '4'><h3>Today is Thursday, It's like Friday Lite</h3></div>

<div *NgSwitchCase = '5'><h3>Today is Friday, TGIF!!!</h3></div>

<div *NgSwitchCase = '6'><h3>Today is Saturday, Let's Party!! :) </h3></div>

<div *NgSwitchDefault>Uh oh! Somethings wrong</div>

</div>

Step 4 - Run your app using the ng serve command. The output will look like this. 

Since this article was written on a Wednesday, accordingly the message is being displayed. 

Step 5 - If you wish to customize the message being displayed, you can create another property with a hard-coded value. 

public day2 = 5

The output for the same would be.

Step 6 - Let’s consider a scenario where the expression to match is invalid. In this case, it must provide a value above 7 for the day2 property. 

  public day2 = 8

The ngSwitchDefault directive is rendered. The output will look like this. 

Learn From The Best Mentors in the Industry!

Automation Testing Masters ProgramExplore Program

Next Steps to Success

We hope that this Angular NgSwitch article helped you. If you wish to learn Angular in-depth and perhaps make a career out of it, then a certification will be helpful.

Simplilearn's Full Stack Developer - MERN Stack helps you understand the design of single-page applications and how Angular facilities their development. This Angular certification provides knowledge of concepts such as TypeScript, Bootstrap Grid System, dependency injections, SPA, forms, pipes, promises, observables, and Angular class testing.

If you have any feedback or questions on the topic, please drop us a comment in the comments section of this article. We will get back to you ASAP!