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
@ -41,14 +41,14 @@ export function main() {
|
||||
}));
|
||||
|
||||
it('should insert content specified by TemplateRef', async(() => {
|
||||
const template = `<template #tpl>foo</template>` +
|
||||
const template = `<ng-template #tpl>foo</ng-template>` +
|
||||
`<ng-container [ngTemplateOutlet]="tpl"></ng-container>`;
|
||||
fixture = createTestComponent(template);
|
||||
detectChangesAndExpectText('foo');
|
||||
}));
|
||||
|
||||
it('should clear content if TemplateRef becomes `null`', async(() => {
|
||||
const template = `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs>` +
|
||||
const template = `<tpl-refs #refs="tplRefs"><ng-template>foo</ng-template></tpl-refs>` +
|
||||
`<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
|
||||
fixture = createTestComponent(template);
|
||||
fixture.detectChanges();
|
||||
@ -63,7 +63,7 @@ export function main() {
|
||||
|
||||
it('should swap content if TemplateRef changes', async(() => {
|
||||
const template =
|
||||
`<tpl-refs #refs="tplRefs"><template>foo</template><template>bar</template></tpl-refs>` +
|
||||
`<tpl-refs #refs="tplRefs"><ng-template>foo</ng-template><ng-template>bar</ng-template></tpl-refs>` +
|
||||
`<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
|
||||
fixture = createTestComponent(template);
|
||||
|
||||
@ -78,14 +78,14 @@ export function main() {
|
||||
}));
|
||||
|
||||
it('should display template if context is `null`', async(() => {
|
||||
const template = `<template #tpl>foo</template>` +
|
||||
const template = `<ng-template #tpl>foo</ng-template>` +
|
||||
`<ng-container *ngTemplateOutlet="tpl; context: null"></ng-container>`;
|
||||
fixture = createTestComponent(template);
|
||||
detectChangesAndExpectText('foo');
|
||||
}));
|
||||
|
||||
it('should reflect initial context and changes', async(() => {
|
||||
const template = `<template let-foo="foo" #tpl>{{foo}}</template>` +
|
||||
const template = `<ng-template let-foo="foo" #tpl>{{foo}}</ng-template>` +
|
||||
`<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
|
||||
fixture = createTestComponent(template);
|
||||
|
||||
@ -97,7 +97,7 @@ export function main() {
|
||||
}));
|
||||
|
||||
it('should reflect user defined `$implicit` property in the context', async(() => {
|
||||
const template = `<template let-ctx #tpl>{{ctx.foo}}</template>` +
|
||||
const template = `<ng-template let-ctx #tpl>{{ctx.foo}}</ng-template>` +
|
||||
`<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
|
||||
fixture = createTestComponent(template);
|
||||
fixture.componentInstance.context = {$implicit: {foo: 'bra'}};
|
||||
@ -105,7 +105,8 @@ export function main() {
|
||||
}));
|
||||
|
||||
it('should reflect context re-binding', async(() => {
|
||||
const template = `<template let-shawshank="shawshank" #tpl>{{shawshank}}</template>` +
|
||||
const template =
|
||||
`<ng-template let-shawshank="shawshank" #tpl>{{shawshank}}</ng-template>` +
|
||||
`<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
|
||||
fixture = createTestComponent(template);
|
||||
|
||||
|
Reference in New Issue
Block a user