Angular

Last Updated: 12/2/2025

Switch statement

  • While the @if block is great for most scenarios, the @switch block provides an alternate syntax to conditionally render data.

Syntax

@switch (userPermissions) {
  @case ('admin') {
    <div>Admin module</div>
  }
  @case ('reviewer') {
    <div>Reviewer module</div>
  }
  @case ('editor') {
    <div>Editor module</div>
  }
  @default {
    <div>Default module</div>
  }
}
  • The value of the conditional expression is compared to the case expression using the triple-equals (===) operator.
  • You can optionally include a @default block. The content of the @default block displays if none of the preceding case expressions match the switch value.
  • If no @case matches the expression and there is no @default block, nothing is shown.
Previous