JIYIK CN >

In common programming languages, you have heard and used switchthe statement at least once.

Statements are used to execute blocks of code when there are many if<pre> statements , we convert these <pre> statements into <pre> statements to save time and make them work more efficiently.switchifswitch

In this tutorial, we will go through an example to create a scenario to execute switchstatements based on the day of the week and display the specific code block for the day of the week.

How to use it in AngularngSwitch

Let us create a new application using the following command.

# angular
ng new my-app

After creating our new application in Angular, we will go to our application directory using this command.

# angular
cd my-app

Now, let's run our application to check if all dependencies are installed correctly.

# angular
ng serve --open

We will create a new component using the following command.

# angular
ng g c greeting

In greeting.component.ts, we will create a Date to store the current day of the week.

# angular
day = new Date().getDay();

We're going to create a switchstatement so that if the date comes back 0it will be Sunday, and 1will be Monday, and so on. So we're going to use [ngSwitch]the binding dayand use to display a different view for each day ngSwitchCasein greeting.component.html.

<h1>Hello! Good Morning</h1>

<div [ngSwitch]="day">
  <div *ngSwitchCase="0">Today is Sunday! Have a nice weekend</div>
  <div *ngSwitchCase="1"><h3>Today is Monday, Have a nice day</h3></div>
  <div *ngSwitchCase="2"><h3>Today is Tuesday, Have a nice day</h3></div>
  <div *ngSwitchCase="3"><h3>Today is Wednesday, Have a nice day</h3></div>
  <div *ngSwitchCase="4"><h3>Today is Thursday, Have a nice day</h3></div>
  <div *ngSwitchCase="5"><h3>Today is Friday, Have a nice day</h3></div>
  <div *ngSwitchCase="6"><h3>Today is Saturday, Have a nice weekend</h3></div>
  <div *ngSwitchDefault>Uh oh! Somethings wrong</div>
</div>

Output:

The above example shows ngSwitchthat shows that the current day is Saturday. So, in this way, using ngSwitchand ngSwitchCase, we can display any code block according to the case scenario.