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.
35 lines
1.3 KiB
Markdown
35 lines
1.3 KiB
Markdown
@cheatsheetSection
|
|
Built-in directives
|
|
@cheatsheetIndex 3
|
|
@description
|
|
{@target ts}`import { CommonModule } from '@angular/common';`{@endtarget}
|
|
{@target js}Available using the `ng.common.CommonModule` module{@endtarget}
|
|
|
|
@cheatsheetItem
|
|
syntax:
|
|
`<section *ngIf="showSection">`|`*ngIf`
|
|
description:
|
|
Removes or recreates a portion of the DOM tree based on the `showSection` expression.
|
|
|
|
@cheatsheetItem
|
|
syntax:
|
|
`<li *ngFor="let item of list">`|`*ngFor`
|
|
description:
|
|
Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
|
|
|
|
@cheatsheetItem
|
|
syntax:
|
|
`<div [ngSwitch]="conditionExpression">
|
|
<ng-template [ngSwitchCase]="case1Exp">...</ng-template>
|
|
<ng-template ngSwitchCase="case2LiteralString">...</ng-template>
|
|
<ng-template ngSwitchDefault>...</ng-template>
|
|
</div>`|`[ngSwitch]`|`[ngSwitchCase]`|`ngSwitchCase`|`ngSwitchDefault`
|
|
description:
|
|
Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of `conditionExpression`.
|
|
|
|
@cheatsheetItem
|
|
syntax:
|
|
`<div [ngClass]="{active: isActive, disabled: isDisabled}">`|`[ngClass]`
|
|
description:
|
|
Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.
|