What is @switch in Angular: Explanation and Example

In Angular, @switch is a structural directive used to conditionally display elements based on a matching expression, similar to a switch-case statement in programming. It works together with @case and @default directives to render the correct template depending on the value.

How It Works

The @switch directive in Angular acts like a traffic controller that decides which block of HTML to show based on a value you provide. Imagine you have a remote control with buttons for different TV channels. The @switch directive checks which button (value) is pressed and then shows the matching channel (template).

Inside the @switch block, you use @case directives to define different options, like different TV channels. If none of the cases match, the @default directive shows a fallback option, like a "No channel found" message. This helps keep your UI clean and organized by showing only the relevant content.

Example

This example shows how to use @switch with @case and @default to display different messages based on a color value.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-color-switch',
  template: `
    <div [ngSwitch]="color">
      <p *ngSwitchCase="'red'">The color is Red.</p>
      <p *ngSwitchCase="'blue'">The color is Blue.</p>
      <p *ngSwitchCase="'green'">The color is Green.</p>
      <p *ngSwitchDefault>The color is unknown.</p>
    </div>
    <button (click)="color = 'red'">Red</button>
    <button (click)="color = 'blue'">Blue</button>
    <button (click)="color = 'green'">Green</button>
    <button (click)="color = 'yellow'">Yellow</button>
  `
})
export class ColorSwitchComponent {
  color = 'red';
}

Output

When the color is 'red', the page shows: The color is Red.
Clicking buttons changes the displayed message to match the selected color or shows 'The color is unknown.' if no case matches.

When to Use

Use @switch when you want to display different content based on a single value that can have multiple possible options. It is helpful when you have several mutually exclusive cases and want to keep your templates clean and easy to read.

For example, you can use it to show different UI messages based on user roles, display different forms depending on a selected option, or render different icons based on a status code.

Key Points

• @switch works like a switch-case statement in templates.
• Use @case to define each option to match.
• @default shows content if no cases match.
• It helps keep templates organized and readable.
• Works well for mutually exclusive content choices.

Key Takeaways

@switch lets you conditionally display content based on a value in Angular templates.

Use @case for each possible value and @default for fallback content.

It keeps your UI clean by showing only one matching block at a time.

Ideal for situations with multiple exclusive options to display.

Works like a switch-case statement but in Angular HTML templates.