NgSwitch

directive

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

Adds / removes DOM sub-trees when the nest match expressions matches the switch expression.

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

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v4.angular.io/api/common/NgSwitch