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-->
|
<!-- #docregion ngSwitch-->
|
||||||
<span [ngSwitch]="favoriteHero &&
|
<span [ngSwitch]="favoriteHero &&
|
||||||
checkMovieHero(favoriteHero)">
|
checkMovieHero(favoriteHero)">
|
||||||
<p *ngSwitchWhen="true">
|
<p *ngSwitchCase="true">
|
||||||
Excellent choice!
|
Excellent choice!
|
||||||
</p>
|
</p>
|
||||||
<p *ngSwitchWhen="false">
|
<p *ngSwitchCase="false">
|
||||||
No movie, sorry!
|
No movie, sorry!
|
||||||
</p>
|
</p>
|
||||||
<p *ngSwitchDefault>
|
<p *ngSwitchDefault>
|
||||||
|
@ -4,10 +4,10 @@
|
|||||||
|
|
||||||
<div [ngSwitch]="question.controlType">
|
<div [ngSwitch]="question.controlType">
|
||||||
|
|
||||||
<input *ngSwitchWhen="'textbox'" [ngControl]="question.key"
|
<input *ngSwitchCase="'textbox'" [ngControl]="question.key"
|
||||||
[id]="question.key" [type]="question.type">
|
[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>
|
<option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
@ -9,8 +9,8 @@
|
|||||||
<!-- #enddocregion asterisk -->
|
<!-- #enddocregion asterisk -->
|
||||||
<!-- #docregion ngSwitch -->
|
<!-- #docregion ngSwitch -->
|
||||||
<div [ngSwitch]="status">
|
<div [ngSwitch]="status">
|
||||||
<template [ngSwitchWhen]="'in-mission'">In Mission</template>
|
<template [ngSwitchCase]="'in-mission'">In Mission</template>
|
||||||
<template [ngSwitchWhen]="'ready'">Ready</template>
|
<template [ngSwitchCase]="'ready'">Ready</template>
|
||||||
<template ngSwitchDefault>Unknown</template>
|
<template ngSwitchDefault>Unknown</template>
|
||||||
</div>
|
</div>
|
||||||
<!-- #enddocregion ngSwitch -->
|
<!-- #enddocregion ngSwitch -->
|
||||||
|
@ -498,18 +498,18 @@ bindon-ngModel
|
|||||||
|
|
||||||
<!-- with *NgSwitch -->
|
<!-- with *NgSwitch -->
|
||||||
<!-- #docregion NgSwitch -->
|
<!-- #docregion NgSwitch -->
|
||||||
<span *ngSwitchWhen="'Eenie'">Eenie</span>
|
<span *ngSwitchCase="'Eenie'">Eenie</span>
|
||||||
<span *ngSwitchWhen="'Meanie'">Meanie</span>
|
<span *ngSwitchCase="'Meanie'">Meanie</span>
|
||||||
<span *ngSwitchWhen="'Miney'">Miney</span>
|
<span *ngSwitchCase="'Miney'">Miney</span>
|
||||||
<span *ngSwitchWhen="'Moe'">Moe</span>
|
<span *ngSwitchCase="'Moe'">Moe</span>
|
||||||
<span *ngSwitchDefault>other</span>
|
<span *ngSwitchDefault>other</span>
|
||||||
<!-- #enddocregion NgSwitch -->
|
<!-- #enddocregion NgSwitch -->
|
||||||
|
|
||||||
<!-- with <template> -->
|
<!-- with <template> -->
|
||||||
<template [ngSwitchWhen]="'Eenie'"><span>Eenie</span></template>
|
<template [ngSwitchCase]="'Eenie'"><span>Eenie</span></template>
|
||||||
<template [ngSwitchWhen]="'Meanie'"><span>Meanie</span></template>
|
<template [ngSwitchCase]="'Meanie'"><span>Meanie</span></template>
|
||||||
<template [ngSwitchWhen]="'Miney'"><span>Miney</span></template>
|
<template [ngSwitchCase]="'Miney'"><span>Miney</span></template>
|
||||||
<template [ngSwitchWhen]="'Moe'"><span>Moe</span></template>
|
<template [ngSwitchCase]="'Moe'"><span>Moe</span></template>
|
||||||
<template ngSwitchDefault><span>other</span></template>
|
<template ngSwitchDefault><span>other</span></template>
|
||||||
|
|
||||||
<!-- #docregion NgSwitch -->
|
<!-- #docregion NgSwitch -->
|
||||||
|
@ -444,7 +444,7 @@ table(width="100%")
|
|||||||
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngSwitch')(format="." )
|
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngSwitch')(format="." )
|
||||||
:marked
|
:marked
|
||||||
In Angular 2, the `ngSwitch` directive works similarly.
|
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`
|
In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null`
|
||||||
and we see the `*ngSwitchDefault` paragraph, "Please enter ...".
|
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 method returns `true`, we see "Excellent choice!".
|
||||||
If that methods returns `false`, we see "No movie, sorry!".
|
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).
|
For more information on the ngSwitch directive see [Template Syntax](../guide/template-syntax.html#ngSwitch).
|
||||||
:marked
|
:marked
|
||||||
|
@ -1053,14 +1053,14 @@ block dart-no-truthy-falsey
|
|||||||
:marked
|
:marked
|
||||||
Three collaborating directives are at work here:
|
Three collaborating directives are at work here:
|
||||||
1. `ngSwitch`: bound to an expression that returns the switch value
|
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
|
1. `ngSwitchDefault`: a marker attribute on the default element
|
||||||
|
|
||||||
.alert.is-critical
|
.alert.is-critical
|
||||||
:marked
|
:marked
|
||||||
**Do *not*** put the asterisk (`*`) in front of `ngSwitch`. Use the property binding instead.
|
**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).
|
For more information, see [\* and <template>](#star-template).
|
||||||
|
|
||||||
<a id="ngFor"></a>
|
<a id="ngFor"></a>
|
||||||
@ -1199,16 +1199,16 @@ block remember-the-brackets
|
|||||||
:marked
|
:marked
|
||||||
### Expanding `*ngSwitch`
|
### Expanding `*ngSwitch`
|
||||||
A similar transformation applies to `*ngSwitch`. We can de-sugar the syntax ourselves.
|
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=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'NgSwitch-expanded')(format=".")
|
||||||
:marked
|
: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.
|
wrapping their former elements in `<template>` tags.
|
||||||
|
|
||||||
Now we can see why the `ngSwitch` itself is not prefixed with an asterisk (*).
|
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.
|
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,
|
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.
|
once for the (*) prefixed version and once for the expanded template version.
|
||||||
That's exactly what we see in this example:
|
That's exactly what we see in this example:
|
||||||
|
Loading…
x
Reference in New Issue
Block a user