Angular 復習(Angular4～)
テンプレートシンタックス
1. <input [value]="expression">
inputのvalueプロパティをexpressionでバインディングする。
2. <div [attr.role]="expression">
divのrole属性をexpressionでバインディングする。
※role属性とは、HTML5で追加された属性。
3. <div [class.extra-sparkle]="expression">
cssクラスextra-sparkleをexpressionでバインディングし、有効にするかを決定する。
ngClassに似ている。
4. <div [style.width.px]="expression">
cssスタイルをexpressionでバインディングする。
5. <button (click)="readRainbow($event)">
クリックボタンが押されたときに、メソッドが呼ばれる。
イベントの種類は、以下のリンクを参照。
https://developer.mozilla.org/en-US/docs/Web/Events
6. <div title="Hello {{ponyName}}">
titleプロパティに、{{}}で補完構文を加える。
<div [title]="'Hello' + ponyName"と同じ。
7. <p>Hello {{ponyName}}</p>
補完構文を加える。
8. <my-cmp [(title)]="name">
双方向に、titleプロパティと、nameをバインディングする。
<my-cmp [title]="name" (titlechange)="name=$event">と同じ。
9. <video #movieplayer ...><button (click)="movieplayer.play()"></video>
movieplayerというローカル変数を作成し、イベントバインディング、データバインディング内でvideo要素の実体にアクセスできるようにする。
10. <p *myUnless="myExpression">...</p>
アスタリスクをつけることで、要素を組込テンプレートに置き換えます。
<ng-template [myUnless]="myExpression"><p>...</p></ng-template>と同じです。
ng-templateは、実体を持たない要素です。また、通常は表示されません。
11. <p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>
補完文字列を指定したpipeでフォーマットします。
12. <p>Employer: {{employer?.companyName}}</p>
クエスチョンマークをつけると、employerオブジェクトが未定義(companyNameがない)の場合は、無視される。
エラーにならないと。