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
@@ -70,12 +70,12 @@ export class NgForOfRow<T> {
|
||||
* - `<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>`
|
||||
* - `<li template="ngFor let item of items; let i = index; trackBy: trackByFn">...</li>`
|
||||
*
|
||||
* With `<template>` element:
|
||||
* With `<ng-template>` element:
|
||||
*
|
||||
* ```
|
||||
* <template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
|
||||
* <ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
|
||||
* <li>...</li>
|
||||
* </template>
|
||||
* </ng-template>
|
||||
* ```
|
||||
*
|
||||
* ### Example
|
||||
|
||||
@@ -26,7 +26,7 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from '
|
||||
* # Showing an alternative template using `else`
|
||||
*
|
||||
* If it is necessary to display a template when the `expression` is falsy use the `else` template
|
||||
* binding as shown. Note that the `else` binding points to a `<template>` labeled `#elseBlock`.
|
||||
* binding as shown. Note that the `else` binding points to a `<ng-template>` labeled `#elseBlock`.
|
||||
* The template can be defined anywhere in the component view but is typically placed right after
|
||||
* `ngIf` for readability.
|
||||
*
|
||||
@@ -76,25 +76,25 @@ import {Directive, EmbeddedViewRef, Input, TemplateRef, ViewContainerRef} from '
|
||||
* Simple form:
|
||||
* - `<div *ngIf="condition">...</div>`
|
||||
* - `<div template="ngIf condition">...</div>`
|
||||
* - `<template [ngIf]="condition"><div>...</div></template>`
|
||||
* - `<ng-template [ngIf]="condition"><div>...</div></ng-template>`
|
||||
*
|
||||
* Form with an else block:
|
||||
* ```
|
||||
* <div *ngIf="condition; else elseBlock">...</div>
|
||||
* <template #elseBlock>...</template>
|
||||
* <ng-template #elseBlock>...</ng-template>
|
||||
* ```
|
||||
*
|
||||
* Form with a `then` and `else` block:
|
||||
* ```
|
||||
* <div *ngIf="condition; then thenBlock else elseBlock"></div>
|
||||
* <template #thenBlock>...</template>
|
||||
* <template #elseBlock>...</template>
|
||||
* <ng-template #thenBlock>...</ng-template>
|
||||
* <ng-template #elseBlock>...</ng-template>
|
||||
* ```
|
||||
*
|
||||
* Form with storing the value locally:
|
||||
* ```
|
||||
* <div *ngIf="condition; else elseBlock; let value">{{value}}</div>
|
||||
* <template #elseBlock>...</template>
|
||||
* <ng-template #elseBlock>...</ng-template>
|
||||
* ```
|
||||
*
|
||||
* @stable
|
||||
|
||||
Reference in New Issue
Block a user