Angular 17 @switch, @case and @default Example

Hello Artisan,

I will explain step by step tutorial angular 17 @switch example. This post will give you a simple example of angular 17 switch case example. We will look at an example of angular 17 @switch @case example. This article goes in detailed on angular 17 conditional @switch example. Alright, let’s dive into the details.

Angular provides conditional statements using ngSwitch, ngSwitchCase, and ngSwitchDefault but, Angular 17 changed the condition statement flow with new syntax. You can use @switch, @case, and @default for the switch case condition in angular 17. 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...