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.

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.

Design Smarter AI WorkflowsWith the AI Accelerator ProgramEnroll Now

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. 

Next Steps to Success

Angular's NgSwitch directive provides a clean and readable way to render different views based on a condition. It simplifies template logic, improves code maintainability, and is especially useful when building dynamic user interfaces that respond to changing application states. Mastering directives like NgSwitch is an important step toward developing modern, scalable Angular applications.

If you're ready to build complete web applications, Simplilearn's AI-Powered Full Stack Developer Course helps you expand beyond Angular by covering HTML, CSS, JavaScript, React, Node.js, databases, APIs, cloud deployment, and AI-assisted development through hands-on projects.

Once you have a strong foundation in full-stack development, the next step is learning how AI is transforming software engineering. Simplilearn's AI Accelerator Program helps you build AI-powered applications, intelligent agents, and automated workflows through live, hands-on learning, enabling you to apply AI to real-world development and business use cases.