ItSolutionStuff.com

This is a short guide on angular 18 @switch example. we will help you to give an example of angular 18 switch case example. This article goes in detailed on angular 18 @switch @case example. We will use angular 18 conditional @switch example.

Angular provides conditional statements using ngSwitch, ngSwitchCase, and ngSwitchDefault but, Angular 18 changed the condition statement flow with new syntax. You can use @switch, @case, and @default for the switch case condition in angular 18. You can see one be one example with output and a new conditional statement.

Let's see the simple example code:

Example:

You can update the following code with the app.component.ts file:

src/app/app.component.ts

import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule], templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { type:number = 2; } 

Here, update the app.component.html file:

src/app/app.component.html

<div class="container"> <!-- Using @switch @case --> @switch (type) { @case (1) { <div>One</div> } @case (2) { <div>Two</div> } @default { <div>Default</div> } } <!-- Using ngSwitch with ngSwitchCase --> <div [ngSwitch]="type"> <div *ngSwitchCase="1">One</div> <div *ngSwitchCase="2">Two</div> <div *ngSwitchDefault>Default</div> </div> </div> 

Output:

You will see the following output:

Two Two 

I hope it can help you...