NgSwitch

directive

npm Package	@angular/common
Module	import { NgSwitch } from '@angular/common';
Source	common/src/directives/ng_switch.ts
NgModule	CommonModule

Overview

@Directive({ selector: '[ngSwitch]' })
class NgSwitch {
  set ngSwitch: any
}

How To Use

<container-element [ngSwitch]="switch_expression">
      <some-element *ngSwitchCase="match_expression_1">...</some-element>
      <some-element *ngSwitchCase="match_expression_2">...</some-element>
      <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
      <ng-container *ngSwitchCase="match_expression_3">
        <!-- use a ng-container to group multiple root nodes -->
        <inner-element></inner-element>
        <inner-other-element></inner-other-element>
      </ng-container>
      <some-element *ngSwitchDefault>...</some-element>
    </container-element>

Selectors

[ngSwitch]

Inputs

Description

NgSwitch stamps out nested views when their match expression value matches the value of the switch expression.

In other words:

• you define a container element (where you place the directive with a switch expression on the [ngSwitch]="..." attribute)
• you define inner views inside the NgSwitch and place a *ngSwitchCase attribute on the view root elements.

Elements within NgSwitch but outside of a NgSwitchCase or NgSwitchDefault directives will be preserved at the location.

The ngSwitchCase directive informs the parent NgSwitch of which view to display when the expression is evaluated. When no matching expression is found on a ngSwitchCase view, the ngSwitchDefault view is stamped out.

Members

set ngSwitch: any