> For the complete documentation index, see [llms.txt](https://fancyloves.gitbook.io/frontendtech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fancyloves.gitbook.io/frontendtech/angularjs/fundamentals/directives/ngswitch.md).

# NgSwitch

The Angular NgSwitch is actually a set of cooperating directives: `NgSwitch`, `NgSwitchCase`, and `NgSwitchDefault`.

```markup
src/app/app.component.html (ngswitch)

<div [ngSwitch]="hero?.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'app-confused'" [hero]="hero"></app-confused-hero>
  <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
</div>
```

* **NgSwitch**
  * itself is not a structural directive.&#x20;
  * It's an **attribute directive** that controls the behavior of the other two switch directives. That's why you write \[ngSwitch], never \*ngSwitch.
  * The emotion value in this example is a string, but the switch value can be of any type.
* **NgSwitchCase** & **NgSwitchDefault**
  * **structural directives**.&#x20;
  * You attach them to elements using the asterisk (\*) prefix notation.&#x20;
  * An NgSwitchCase displays its host element when its value matches the switch value.&#x20;
  * The NgSwitchDefault displays its host element when no sibling NgSwitchCase matches the switch value.