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データバインディングの詳細はこちら。

関連記事の目次