angular-cn/public/docs/js/latest/api/directives/NgSwitch-class.jade

p.location-badge.
  exported from <a href='../directives'>angular2/directives</a>
  defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.33/modules/angular2/src/directives/ng_switch.ts#L19-L135">angular2/src/directives/ng_switch.ts (line 19)</a>

:markdown
  The `NgSwitch` directive is used to conditionally swap DOM structure on your template based on a
  scope expression.
  Elements within `NgSwitch` but without `NgSwitchWhen` or `NgSwitchDefault` directives will be
  preserved at the location as specified in the template.
  
  `NgSwitch` simply chooses nested elements and makes them visible based on which element matches
  the value obtained from the evaluated expression. In other words, you define a container element
  (where you place the directive), place an expression on the **`[ng-switch]="..."` attribute**),
  define any inner elements inside of the directive and place a `[ng-switch-when]` attribute per
  element.
  The when attribute is used to inform NgSwitch which element to display when the expression is
  evaluated. If a matching expression is not found via a when attribute then an element with the
  default attribute is displayed.
  
  # Example:
  
  ```
  <ANY [ng-switch]="expression">
    <template [ng-switch-when]="whenExpression1">...</template>
    <template [ng-switch-when]="whenExpression1">...</template>
    <template ng-switch-default>...</template>
  </ANY>
  ```
  
  

.l-main-section
  h2 Annotations
  .l-sub-section
    h3.annotation Directive
    pre.prettyprint
      code.
        @Directive({selector: &#39;[ng-switch]&#39;, properties: [&#39;ngSwitch&#39;]})


.l-main-section
  h2 Members
  .l-sub-section
    h3 constructor

    
    pre.prettyprint
      code.
        constructor()
    
    :markdown
      
      




  .l-sub-section
    h3 ngSwitch

    
    :markdown