chore: update ngSwitchWhen to ngSwitchCase

See angular/angular@e1fcab7

Author: filipesilva

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html

@@ -10,10 +10,10 @@ <h2>Movie List</h2>
     <!-- #docregion ngSwitch-->
     <span [ngSwitch]="favoriteHero &&
                    checkMovieHero(favoriteHero)">
-      <p *ngSwitchWhen="true">
+      <p *ngSwitchCase="true">
         Excellent choice!
       </p>
-      <p *ngSwitchWhen="false">
+      <p *ngSwitchCase="false">
         No movie, sorry!
       </p>
       <p *ngSwitchDefault>

public/docs/_examples/cb-dynamic-form-deprecated/ts/app/dynamic-form-question.component.html

@@ -4,10 +4,10 @@
 
   <div [ngSwitch]="question.controlType">
 
-    <input *ngSwitchWhen="'textbox'" [ngControl]="question.key"
+    <input *ngSwitchCase="'textbox'" [ngControl]="question.key"
             [id]="question.key" [type]="question.type">
 
-    <select [id]="question.key" *ngSwitchWhen="'dropdown'" [ngControl]="question.key">
+    <select [id]="question.key" *ngSwitchCase="'dropdown'" [ngControl]="question.key">
       <option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
     </select>
 

public/docs/_examples/structural-directives/ts/app/structural-directives.component.html

@@ -9,8 +9,8 @@ <h1>Structural Directives</h1>
 <!-- #enddocregion asterisk -->
 <!-- #docregion ngSwitch -->
 <div [ngSwitch]="status">
-  <template [ngSwitchWhen]="'in-mission'">In Mission</template>
-  <template [ngSwitchWhen]="'ready'">Ready</template>
+  <template [ngSwitchCase]="'in-mission'">In Mission</template>
+  <template [ngSwitchCase]="'ready'">Ready</template>
   <template ngSwitchDefault>Unknown</template>
 </div>
 <!-- #enddocregion ngSwitch -->

public/docs/_examples/template-syntax/ts/app/app.component.html

@@ -498,18 +498,18 @@ <h3>Use setStyles() - CSS property names</h3>
 
       <!-- with *NgSwitch -->
       <!-- #docregion NgSwitch -->
-      <span *ngSwitchWhen="'Eenie'">Eenie</span>
-      <span *ngSwitchWhen="'Meanie'">Meanie</span>
-      <span *ngSwitchWhen="'Miney'">Miney</span>
-      <span *ngSwitchWhen="'Moe'">Moe</span>
+      <span *ngSwitchCase="'Eenie'">Eenie</span>
+      <span *ngSwitchCase="'Meanie'">Meanie</span>
+      <span *ngSwitchCase="'Miney'">Miney</span>
+      <span *ngSwitchCase="'Moe'">Moe</span>
       <span *ngSwitchDefault>other</span>
       <!-- #enddocregion NgSwitch -->
 
       <!-- with <template> -->
-      <template [ngSwitchWhen]="'Eenie'"><span>Eenie</span></template>
-      <template [ngSwitchWhen]="'Meanie'"><span>Meanie</span></template>
-      <template [ngSwitchWhen]="'Miney'"><span>Miney</span></template>
-      <template [ngSwitchWhen]="'Moe'"><span>Moe</span></template>
+      <template [ngSwitchCase]="'Eenie'"><span>Eenie</span></template>
+      <template [ngSwitchCase]="'Meanie'"><span>Meanie</span></template>
+      <template [ngSwitchCase]="'Miney'"><span>Miney</span></template>
+      <template [ngSwitchCase]="'Moe'"><span>Moe</span></template>
       <template ngSwitchDefault><span>other</span></template>
 
       <!-- #docregion NgSwitch -->

public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade

@@ -444,15 +444,15 @@ table(width="100%")
       +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngSwitch')(format="." )
       :marked
         In Angular 2, the `ngSwitch` directive works similarly. 
-        It displays an element whose `*ngSwitchWhen` matches the current `ngSwitch` expression value.
+        It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value.
 
         In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null`
         and we see the `*ngSwitchDefault` paragraph, "Please enter ...".
         If the `favoriteHero` is set, it checks the movie hero by calling a component method.
         If that method returns `true`, we see "Excellent choice!".
         If that methods returns `false`, we see "No movie, sorry!".
 
-        The (*) before `ngSwitchWhen` and `ngSwitchDefault` is required in this example.
+        The (*) before `ngSwitchCase` and `ngSwitchDefault` is required in this example.
 
         For more information on the ngSwitch directive see [Template Syntax](../guide/template-syntax.html#ngSwitch).
 :marked

public/docs/ts/latest/guide/template-syntax.jade

@@ -1053,14 +1053,14 @@ block dart-no-truthy-falsey
 :marked
   Three collaborating directives are at work here:
   1. `ngSwitch`: bound to an expression that returns the switch value
-  1. `ngSwitchWhen`: bound to an expression returning a match value
+  1. `ngSwitchCase`: bound to an expression returning a match value
   1. `ngSwitchDefault`: a marker attribute on the default element
 
 .alert.is-critical
   :marked
     **Do *not*** put the asterisk (`*`) in front of `ngSwitch`. Use the property binding instead.
 
-    **Do** put the asterisk (`*`) in front of `ngSwitchWhen` and `ngSwitchDefault`.
+    **Do** put the asterisk (`*`) in front of `ngSwitchCase` and `ngSwitchDefault`.
     For more information, see [\* and <template>](#star-template).
 
 <a id="ngFor"></a>
@@ -1199,16 +1199,16 @@ block remember-the-brackets
 :marked
   ### Expanding `*ngSwitch`
   A similar transformation applies to `*ngSwitch`. We can de-sugar the syntax ourselves.
-  Here's an example, first with `*ngSwitchWhen` and `*ngSwitchDefault` and then again with `<template>` tags:
+  Here's an example, first with `*ngSwitchCase` and `*ngSwitchDefault` and then again with `<template>` tags:
 +makeExample('template-syntax/ts/app/app.component.html', 'NgSwitch-expanded')(format=".")
 :marked
-  The `*ngSwitchWhen` and `*ngSwitchDefault` expand in exactly the same manner as `*ngIf`,
+  The `*ngSwitchCase` and `*ngSwitchDefault` expand in exactly the same manner as `*ngIf`,
   wrapping their former elements in `<template>` tags.
 
   Now we can see why the `ngSwitch` itself is not prefixed with an asterisk (*).
   It does not define content. It's job is to control a collection of templates.
 
-  In this case, it governs two sets of `NgSwitchWhen` and `NgSwitchDefault` directives.
+  In this case, it governs two sets of `ngSwitchCase` and `NgSwitchDefault` directives.
   We should expect it to display the values of the selected template twice,
   once for the (*) prefixed version and once for the expanded template version.
   That's exactly what we see in this example: