Angular２のコンポーネントとテンプレート間でデータをやり取りするバインディングの形式についてまとめました。
※Angular2のβ版、TypeScriptを使って確認したものです。
１）1Way（データの流れ：データソース（コンポーネント）→ビュー（DOM））
①内挿（interpolation）
{{value}}
※内挿（interpolation）の詳細はこちら。
②プロパティバインディング
[property] = “value”
・DOM要素のプロパティをセットする。
例）
<img [src] = “heroImageUrl”>
img要素のsrc属性にコンポーネントの属性の値をセット
③アトリビュートバインディング
[attr.アトリビュート名] = “value”
・aria、svg、tableのspanアトリビュートなど、対応する要素プロパティがない場合に使用する。
例）
<tr><td [attr.colspan] = “1 + 1″>One-Two</td></tr>
④クラスバインディング
[class] = “expr”
・要素のclass属性からCSSクラス名を追加したり、除去したりできる。
⑤スタイルバインディング
[style.style-property] = “expr”
・インラインスタイルを設定できる。
２）1Way（データの流れ：ビュー（DOM）→データソース（コンポーネント））
●イベントバインディング
(event) = “handler”
例）
<div (click)=”selectHero(hero)></div>
ユーザーのクリックイベントでコンポーネントの”selectHero”メソッドをコール
３）2wayデータバインディング（データの流れ：データソース（コンポーネント）←→ビュー（DOM））
●NgModelビルトインディレクティブ
[(ngModel)] = “proverty”
・構文は”[..]”のプロパティバインディングと”(..)”のイベントバインディングを合わせた形。
例）
<input [(ngModel)]=”hero.name”>
・プロパティバインディングでコンポーネントからデータがセット。
・ユーザーのインプットボックス入力はイベントバインディングでコンポーネントに最新の値が再設定
※2wayデータバインディングの詳細はこちら。