Search⌘ K
AI Features
Home
Courses
Directives and Pipes in Angular

The Built-in `NgSwitch` Directive

Explore how to implement the NgSwitch directive in Angular for managing multiple conditional views. Understand the roles of NgSwitch, NgSwitchCase, and NgSwitchDefault in dynamically controlling DOM elements based on component properties, enhancing code readability and performance.

We'll cover the following...

The NgSwitch structural directive provides another well-known switch keyword to the HTML world. We can treat it as an extension of the NgIf directive, which helps consider multiple cases.

The NgSwitch syntax

The NgSwitch syntax is very similar to switch syntax from other languages. So, we have a place that takes an expression, the particular cases, and a default value if no case fits.

Based on this, we can distinguish three directives composed of the NgSwitch feature.

  • The plain attribute directive NgSwitch is in control of other directives.
  • The structural directive NgSwithCase adds or removes elements from
...