chore: update ngSwitchWhen to ngSwitchCase

See https://github.com/angular/angular/commit/e1fcab7
This commit is contained in:
Filipe Silva 2016-06-21 03:03:31 +01:00 committed by Naomi Black
parent c467d56a2b
commit 58d20e57b5
6 changed files with 21 additions and 21 deletions

View File

@ -10,10 +10,10 @@
<!-- #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>

View File

@ -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>

View File

@ -9,8 +9,8 @@
<!-- #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 -->

View File

@ -498,18 +498,18 @@ bindon-ngModel
<!-- 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 -->

View File

@ -444,7 +444,7 @@ table(width="100%")
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngSwitch')(format="." )
:marked
In Angular&nbsp;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 ...".
@ -452,7 +452,7 @@ table(width="100%")
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

View File

@ -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 &lt;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: