CODEWITHSUNDEEP
angularswitch-statementcontrol-flowangular-control-flow
Marios Tele
Marios Tele

Reputation: 55

Angular 17 @switch multiple values in case

I have angular 17 and i'm using control flow. I want to use @switch

Example:

@switch (variable) {
   @case ("sun")
   {
     //do something
   }
   @case ("sea")
   { 
   }
}

Now i have two different value of variable but do same things, how can i do that? It is possible something like this? :

 @switch (variable) {
   @case ("sun","moon")
   {
     //do something
   }
   @case ("sea")
   { 
   }
}

Solution or suggestions

Upvotes: 4

Views: 3634

Answers (1)

Naren Murali
Naren Murali

Reputation: 57986

When you give the switch as true the indivual cases can be rewritten with javascript array method .includes to check for multiple values, this will achieve what you want!

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="value"/>
    @switch (true) {
      @case (["sun","moon"].includes(this.value))
      {
        <h1>sun or moon</h1>
      }
      @case (this.value === "sea")
      { 
     <h1>sea</h1>
      }
    }
  `,
})
export class App {
  value = 'moon';
}

bootstrapApplication(App);

Stackblitz Demo

Upvotes: 2

Related Questions