bf8eb41248
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.
2.9 KiB
@cheatsheetSection Template syntax @cheatsheetIndex 2 @description
@cheatsheetItem
syntax:
<input [value]="firstName">|[value]
description:
Binds property value to the result of expression firstName.
@cheatsheetItem
syntax:
<div [attr.role]="myAriaRole">|[attr.role]
description:
Binds attribute role to the result of expression myAriaRole.
@cheatsheetItem
syntax:
<div [class.extra-sparkle]="isDelightful">|[class.extra-sparkle]
description:
Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.
@cheatsheetItem
syntax:
<div [style.width.px]="mySize">|[style.width.px]
description:
Binds style property width to the result of expression mySize in pixels. Units are optional.
@cheatsheetItem
syntax:
<button (click)="readRainbow($event)">|(click)
description:
Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.
@cheatsheetItem
syntax:
<div title="Hello {{ponyName}}">|{{ponyName}}
description:
Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to:
<div [title]="'Hello ' + ponyName">
@cheatsheetItem
syntax:
<p>Hello {{ponyName}}</p>|{{ponyName}}
description:
Binds text content to an interpolated string, for example, "Hello Seabiscuit".
@cheatsheetItem
syntax:
<my-cmp [(title)]="name">|[(title)]
description:
Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">
@cheatsheetItem
syntax:
<video #movieplayer ...> <button (click)="movieplayer.play()"> </video>|#movieplayer|(click)
description:
Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.
@cheatsheetItem
syntax:
<p *myUnless="myExpression">...</p>|*myUnless
description:
The * symbol turns the current element into an embedded template. Equivalent to:
<ng-template [myUnless]="myExpression"><p>...</p></ng-template>
@cheatsheetItem
syntax:
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>|{{cardNumber | myCardNumberFormatter}}
description:
Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter.
@cheatsheetItem
syntax:
<p>Employer: {{employer?.companyName}}</p>|{{employer?.companyName}}
description:
The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.
@cheatsheetItem
syntax:
<svg:rect x="0" y="0" width="100" height="100"/>|svg:
description:
An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component.
@cheatsheetItem
syntax:
<svg> <rect x="0" y="0" width="100" height="100"/> </svg>|svg
description:
An <svg> root element is detected as an SVG element automatically, without the prefix.