0Pricing
Angular Academy · Lesson

Switching with @switch

Choose templates with @switch and @case.

Switching with switch

The at-switch block chooses one branch among several based on a value, like a switch statement. It pairs with at-case and at-default.

Basic switch Syntax

Write at-switch with the expression in parentheses, then one or more at-case blocks, each with a matching value.

// @switch (status) {
//   @case ('loading') { <p>Loading...</p> }
//   @case ('error')   { <p>Error!</p> }
//   @default          { <p>Ready</p> }
// }

All lessons in this course

  1. Conditional Rendering with @if
  2. Looping with @for
  3. Switching with @switch
  4. Deferred Loading with @defer
← Back to Angular Academy