Шпаргалка по синтаксису шаблонов Angular2

взято с официальной документации, переведено/переработано.

<input [value]=”firstName”> задание свойства value
<div [attr.role]=”myAriaRole”> задание атрибута role.
<div [class.extra-sparkle]=”isDelightful”> Выставляет класс extra-sparkle по условию isDelightful
<div [style.width.px]=”mySize”> задает значение width в пикселях.
<button (click)=”readRainbow($event)”> Привязывает обраобтчик клика readRainbow
<p>Hello {{ponyName}}</p>
<div title=”Hello {{ponyName}}“>
Подставляет значение выражения
<my-cmp [(title)]=”name”> Двойное связывание, альтернатива: <my-cmp [title]=”name” (titleChange)=”name=$event”>
<video #movieplayer …>
<button (click)=”movieplayer.play()”>
</video>
Создает локальную переменную movieplayer, которая является ссылкой на элемент video
<p *myUnless=”myExpression”>…</p> Символ * превращает текущий элмент во втроенный шаблон: :<template [myUnless]=”myExpression”><p>…</p></template>
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p> Применение myCardNumberFormatter пайпа.
<p>Employer: {{employer?.companyName}}</p> Указание не обязательного поля с помощью оператора “?

Angular one-time binding cheat sheet

ng-bind:

[javascript gutter=”0″]
{{ ::user.name }}
[/javascript]

with filters

[javascript gutter=”0″]
{{ ::item.price|number }}
[/javascript]

ng-class:

[javascript gutter=”0″]
<div ng-class="::{ ‘active’: item.active }"></div>
[/javascript]

ng-if:

[javascript gutter=”0″]
<div ng-if="::user.isOnline"></div>
[/javascript]

with several conditions:

[javascript gutter=”0″]
<div ng-if="::(user.isOnline && users.length)"></div>
[/javascript]

ng-repeat:

[javascript gutter=”0″]
<div ng-repeat="item in ::user.items"></div>
[/javascript]

ng-options:

[javascript gutter=”0″]
<select ng-options="n.title for n in ::list"></select>
[/javascript]

directive attributes:

[javascript gutter=”0″]
<user-card user="::currentUser"></user-card>
[/javascript]
it will work even if you have two-way binging inside your directive