chore: update ngSwitchWhen to ngSwitchCase
See https://github.com/angular/angular/commit/e1fcab7
This commit is contained in:
parent
c467d56a2b
commit
58d20e57b5
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -444,7 +444,7 @@ 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 ...".
|
||||
|
@ -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
|
||||
|
|
|
@ -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:
|
||||
|
|
Loading…
Reference in New Issue