feat(compiler): introduce <ng-template>, deprecate <template> and template attribute
The rationale of this change is to improve the inter-operability with web
components that might make use of the `<template>` tag.
DEPRECATION
The template tags and template attribute are deprecated:
<template ngFor [ngFor]=items let-item><li>...</li></template>
<li template="ngFor: let item of items">...</li>
should be rewritten as:
<ng-template ngFor [ngFor]=items let-item><li>...</li></ng-template>
Note that they still be supported in 4.x with a deprecartion warning in
development mode.
MIGRATION
- `template` tags (or elements with a `template` attribute) should be rewritten
as a `ng-template` tag,
- `ng-content` selectors should be updated to referto a `ng-template` where they
use to refer to a template: `<ng-content selector="template[attr]">` should be
rewritten as `<ng-content selector="ng-template[attr]">`
- if you consume a component relying on your templates being actual `template`
elements (that is they include a `<ng-content selector="template[attr]">`). You
should still migrate to `ng-template` and make use of `ngProjectAs` to override
the way `ng-content` sees the template:
`<ng-template projectAs="template[attr]">`
- while `template` elements are deprecated in 4.x they continue to work.
This commit is contained in:
committed by
Igor Minar
parent
3f519207a4
commit
bf8eb41248
@@ -34,7 +34,7 @@ class NgIfSimple {
|
||||
show = {{show}}
|
||||
<br>
|
||||
<div *ngIf="show; else elseBlock">Text to show</div>
|
||||
<template #elseBlock>Alternate text while primary text is hidden</template>
|
||||
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
|
||||
`
|
||||
})
|
||||
class NgIfElse {
|
||||
@@ -51,9 +51,9 @@ class NgIfElse {
|
||||
show = {{show}}
|
||||
<br>
|
||||
<div *ngIf="show; then thenBlock; else elseBlock">this is ignored</div>
|
||||
<template #primaryBlock>Primary text to show</template>
|
||||
<template #secondaryBlock>Secondary text to show</template>
|
||||
<template #elseBlock>Alternate text while primary text is hidden</template>
|
||||
<ng-template #primaryBlock>Primary text to show</ng-template>
|
||||
<ng-template #secondaryBlock>Secondary text to show</ng-template>
|
||||
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
|
||||
`
|
||||
})
|
||||
class NgIfThenElse implements OnInit {
|
||||
@@ -82,7 +82,7 @@ class NgIfThenElse implements OnInit {
|
||||
<div *ngIf="userObservable | async; else loading; let user">
|
||||
Hello {{user.last}}, {{user.first}}!
|
||||
</div>
|
||||
<template #loading let-user>Waiting... (user is {{user|json}})</template>
|
||||
<ng-template #loading let-user>Waiting... (user is {{user|json}})</ng-template>
|
||||
`
|
||||
})
|
||||
class NgIfLet {
|
||||
|
||||
@@ -22,9 +22,9 @@ import {Subject} from 'rxjs/Subject';
|
||||
<ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
|
||||
<hr>
|
||||
|
||||
<template #greet><span>Hello</span></template>
|
||||
<template #eng let-name><span>Hello {{name}}!</span></template>
|
||||
<template #svk let-person="localSk"><span>Ahoj {{person}}!</span></template>
|
||||
<ng-template #greet><span>Hello</span></ng-template>
|
||||
<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
|
||||
<ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>
|
||||
`
|
||||
})
|
||||
class NgTemplateOutletExample {
|
||||
|
||||
Reference in New Issue
Block a user