Angular @switch: Complete Guide

With the release of Angular 17, a new template syntax called @switch was introduced, providing a way to conditionally render different template sections based on a logical expression.

This syntax serves as a modern alternative to the older ngSwitch structural directive.

This guide walks through the @switch template syntax and demonstrates how to apply it in your Angular projects.

Table of Contents

The following topics are covered in this post:

• Understanding @switch
• Working with multiple @case blocks
• The role of @default in @switch
• Comparing ngSwitch and @switch
• Migrating with the Angular CLI
• Key takeaways

Note: For insights on the @if or @for syntaxes, refer to these guides:

• Angular @if: Complete Guide

• Angular @for: Complete Guide

Official documentation on @switch and the broader control flow syntax is available here: Angular Control Flow.

Understanding @switch

In Angular, @switch fulfills the same role that the switch statement does in JavaScript.

It selects one template block to render from several options, based on the evaluated value of an expression.

This syntax is particularly useful when you have two or more distinct alternatives to render, determined by the expression's value.

When there are only two possible outcomes, the @if syntax is generally the more appropriate choice.

It's important to highlight that @switch is not a directive. Instead, it is a built-in feature of the template engine, similar to @if and @for.

Here is how the syntax operates.

Working with multiple @case blocks

Here's a practical example of @switch:

@switch (color) {
    @case ("red") {
        <div>Red</div>
    }
    @case ("blue") {
        <div>Blue</div>
    }
}

The output of the code above is:

• "Red" output when the color variable holds the value "red"
• "Blue" output when the color variable holds the value "blue"

The parallels between @switch and the JavaScript switch statement are clear:

switch (color) {
  case "red":
    // code
    break;
  case "blue":
    // code
    break;
}

The role of @default in @switch

The @default clause defines the template to render when the expression's value does not match any of the @case blocks.

Consider the following example:

@Component({
  template: ` @switch (color) { 
  @case ("red") {
      <div>Red</div>
    } 
    @case ("blue") {
      <div>Blue</div>
    } 
    @default {
      <div>Default</div>
    } }`,
})
export class AppComponent {
  color = "green";
}

In this scenario, the code renders "Default" because the value "green" of the color variable does not correspond to any of the @case blocks.

Comparing ngSwitch and @switch

The @switch syntax is designed as a drop-in replacement for the ngSwitch structural directive.

It offers several advantages over the older directive:

• It is far more intuitive, closely mirroring the structure of a standard JavaScript switch statement.

• It doesn't require explicit imports within standalone components. The @switch syntax is inherently available in every template, unlike ngSwitch.

Migrating with the Angular CLI

The Angular CLI provides a command to facilitate the migration from ngSwitch to @switch:

ng generate @angular/core:control-flow

Executing this command converts all *ngSwitch directives in your codebase to the new syntax. It also performs the equivalent migration for @if and @for.

I hope this guide proves helpful. To stay updated on similar future posts, feel free to subscribe to our newsletter:

Subscribers also receive the latest developments from the Angular ecosystem.

For a comprehensive overview of Angular Core features, including @switch, check out the Angular Core Deep Dive Course:

Key takeaways

This guide has delved into the details of the new @switch template syntax.

As demonstrated, it is highly intuitive and mirrors the simplicity of a standard JavaScript switch statement.

No imports are necessary, and migrating to it is straightforward with the Angular CLI.

We encourage you to experiment with it and reach out in the comments if you have any questions!