da9b46a071
BREAKING CHANGE:
Angular is now fully camel case.
Before:
<p *ng-if="cond">
<my-cmp [my-prop]="exp">
<my-cmp (my-event)="action()">
<my-cmp [(my-prop)]="prop">
<input #my-input>
<template ng-for #my-item [ng-for-of]=items #my-index="index">
After
<p *ngIf="cond">
<my-cmp [myProp]="exp">
<my-cmp (myEvent)="action()">
<my-cmp [(myProp)]="prop">
<input #myInput>`,
<template ngFor="#my-item" [ngForOf]=items #myIndex="index">
The full details are found in [angular2/docs/migration/kebab-case.md](https://github.com/angular/angular/blob/master/modules/angular2/docs/migration/kebab-case.md)
81 lines
2.5 KiB
Markdown
81 lines
2.5 KiB
Markdown
@cheatsheetSection
|
|
Template syntax
|
|
@cheatsheetIndex 1
|
|
@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, e.g. "Hello Seabiscuit". Equivalent to:
|
|
`<div [title]="'Hello' + ponyName">`
|
|
|
|
@cheatsheetItem
|
|
syntax:
|
|
`<p>Hello {{ponyName}}</p>`|`{{ponyName}}`
|
|
description:
|
|
Binds text content to an interpolated string, e.g. "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 *my-unless="myExpression">...</p>`|`*my-unless`
|
|
description:
|
|
The `*` symbol means that the current element will be turned into an embedded template. Equivalent to:
|
|
`<template [myless]="myExpression"><p>...</p></template>`
|
|
|
|
@cheatsheetItem
|
|
syntax:
|
|
`<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>`|`{{cardNumber | myCreditCardNumberFormatter}}`
|
|
description:
|
|
Transforms the current value of expression `cardNumber` via the pipe called `creditCardNumberFormatter`.
|
|
|
|
@cheatsheetItem
|
|
syntax:
|
|
`<p>Employer: {{employer?.companyName}}</p>`|`{{employer?.companyName}}`
|
|
description:
|
|
The Elvis operator (`?`) means that the `employer` field is optional and if `undefined`, the rest of the expression should be ignored.
|