Angular switch case example

In this video, we will discuss angular ngSwitch directive. Let us understand switch case with an example. Switch case in angular is a combination of 3 directives

1. ngSwitch directive
2. ngSwitchCase directive
3. ngSwitchDefault directive

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

Text version of the video
http://csharp-video-tutorials.blogspot.com/2018/03/angular-switch-case-example.html

Slides
http://csharp-video-tutorials.blogspot.com/2018/03/angular-switch-case-example-slides.html

Angular CRUD Tutorial
https://www.youtube.com/playlist?list=PL6n9fhu94yhXwcl3a6rIfAI7QmGYIkfK5

Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists


Consider the following department data. Depending on the employee's department id we want to display department name.

departments: Department[] = [
{ id: 1, name: 'Help Desk' },
{ id: 2, name: 'HR' },
{ id: 3, name: 'IT' },
{ id: 4, name: 'Payroll' }
];

ngSwitch example : For example code please refer to our blog using the link below.
http://csharp-video-tutorials.blogspot.com/2018/03/angular-switch-case-example.html

Code Explanation
1. [ngSwitch]="employee.department". The expression (employee.department) returns department id (1, 2 , 3 etc)

2. [span *ngSwitchCase="1"] Help Desk [/span]. If the department id is 1, then this switchcase is executed and it displays Help Desk

3. [span *ngSwitchDefault] N/A [/span]. The default switch case is executed if the department id is not 1, 2, 3 and 4

4. Jus like ngIf and ngFor, the directives ngSwicthCase and ngSwitchDefault are also structural directives, hence they have an asterisk in front of them

5. If multiple ngSwitchCases match the switch expression value, then all those ngSwitchCases are displayed