Angular 14 NgSwitch Directive Tutorial with Examples
ngSwitch
structural directive with real-world examples. NgSwitch is a built-in Angular template directive, and it works the same way as the JavaScript’s switch statement does. This directive helps in showing or hiding the templates based on the conditional statement.
To make the NgSwitch work declare the NgSwitch structural directive on the main HTML element.
Inside the NgSwitch container define the *ngSwitchCase statement, the *ngSwitchCase
statement refers to one of the possibility from the multiple possibilities tree.
If one statement doesn’t match with the expression, it goes to another ngSwitchCase statement, and if it doesn’t match with the expression, then it shows the result from the element where a *ngSwitchDefault
statement is defined.
In order to remove strict type warnings or errors make sure to set
“strict”: false
and"strictTemplates": false
under compilerOptions and angularCompilerOptions properties in tsconfig.json file.
Table of contents
Understand NgSwitch, NgSwitchCase and ngSwitchDefault Directives
Angular offers various built-in directives, NgSwitch is one of the main directive which allows to place multiple statements in the Document Object Model (DOM).
Shows the result if the condition is met with certain expression.The NgSwitch directive requires *ngSwitchCase
and *ngSwitchDefault
directive to get the result from the multiple possibilities.
Directives | Description |
---|---|
ngSwitch | It’s a structural directive, all the possible values defined inside of it. It gets the switch value based on the matched statement among multiple possibilities. |
ngSwitchCase | The ngSwitchCase statement is declared inside the ngSwitch directive with the specific value. |
ngSwitchDefault | This statement executes when the expression doesn’t match with any of the defined value. |
Using NgSwitch Directive in Angular
In the below example, we will try to understand the NgSwitch expression in a simple manner. In order to set the ngSwitch directive in Angular HTML template. Add the [ngSwitch]
directive along with the desired value on the main container:
<ul [ngSwitch]="superhero">
</ul>
Now, ngSwitch has been added to the main container along with `superhero`
value. Then, add the *ngSwitchCase
directive inside the NgSwitch statement and the same way you can place as many as ngSwitchCase inside the NgSwitch statement.
<li *ngSwitchCase="'Groot'">Groot</li>
Lastly, we need to declare the *ngSwitchDefault
directive. The ngSwitchDefault directive will show the default result if the ngSwitchCase statement unable to fetch the result.
<li *ngSwitchDefault>Batman</li>
Angular 14 NgSwitch Directive Example
You can see below how we used NgSwitch directive with HTML elements to show the matching result from the multiple choices:
<ul [ngSwitch]="superhero">
<li *ngSwitchCase="'Groot'">Groot</li>
<li *ngSwitchCase="'Ironman'">Ironman</li>
<li *ngSwitchCase="'Hulk'">Hulk</li>
<li *ngSwitchCase="'Thor'">Thor</li>
<li *ngSwitchCase="'Spiderman'">Spiderman</li>
<li *ngSwitchDefault>Batman</li>
</ul>
Define ngSwitch expression value in app.component.ts
:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
superhero = 'Spiderman';
}
The [ngSwitch] directive will return `Spiderman`
as a result from the multiple possibilities because we defined `Spiderman`
as the superhero’s value.
Using NgFor with NgSwitch in Angular
In this example, we will understand how to use *ngFor directive with *ngSwitch directive. We mainly use *ngFor
directive to iterate over a data collection.
In the below example we will create a Cars array and show the cars data on front-end using Angular *ngFor and *ngSwitch directive. This way, we will assign dynamic color classes to the HTML elements.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div *ngFor="let car of Cars" [ngSwitch]="car.color">
<div *ngSwitchCase="'blue'"
class="blue">
{{ car.name }} ({{ car.color }})
</div>
<div *ngSwitchCase="'yellow'"
class="yellow">
{{ car.name }} ({{ car.color }})
</div>
<div *ngSwitchCase="'silver'"
class="silver">
{{ car.name }} ({{ car.color }})
</div>
<div *ngSwitchCase="'red'"
class="red">
{{ car.name }} ({{ car.color }})
</div>
<div *ngSwitchDefault
class="text-warning">
{{ car.name }} ({{ car.color }})
</div>
</div>`
})
export class AppComponent {
Cars: any[] = [
{
"name": "BMW",
"average": 12,
"color": 'blue'
},
{
"name": "Ford",
"age": 15,
"color": 'yellow'
},
{
"name": "Suzuki",
"age": 18,
"color": 'silver'
},
{
"name": "MG Hector",
"age": 14,
"color": 'red'
},
{
"name": "Jaguar",
"age": 8,
"color": 'green'
}
];
}
Add some styling in styles.css
:
.blue {
color: blue
}
.yellow {
color: yellow
}
.silver {
color: silver
}
.red {
color: red
}
.blue {
color: blue
}
Now, above Angular NgSwitch expression will apply various color classes to the HTML element using NgFor directive:
Conclusion
Finally, we’ve completed Angular NgSwitch directive tutorial with examples. In this Angular tutorial we tried to cover up workflow of NgSwitch directive.
Roles of NgSwitchCase and ngSwitchDefault directives in NgSwitch statement. And how to use *ngFor with NgSwitch directive. There are many conditions where we required to use NgSwitch directive. I hope this tutorial will help you to clear the basic concepts of Angular directives.