データバインディングはAngularのコアコンセプトであり、コンポーネントとDOM間の通信を定義できるため、データのプッシュとプルを気にすることなく、インタラクティブなアプリケーションを非常に簡単に定義できます。 データバインディングには4つの形式があり、データの流れ方が異なります。
この投稿はAngular2以上をカバーしています
コンポーネントからDOMへ
補間：{{値}}
これにより、コンポーネントのプロパティの値が追加されます。
<li>Name: {{ user.name }}</li>
<li>Email: {{ user.email }}</li>
プロパティバインディング：[property] =“ value”
プロパティバインディングを使用すると、値はコンポーネントから指定されたプロパティに渡されます。これは多くの場合、単純なhtml属性です。
<input type="email" [value]="user.email">
さらに2つの例を示します。1つはコンポーネントのselectedColorの値から背景色を適用し、もう1つはisSelectedがtrueと評価された場合にクラス名を適用します。
<div [style.background-color]="selectedColor">
DOMからコンポーネントへ
イベントバインディング:(イベント）=「関数」
特定のDOMイベントが発生した場合（例： click 、 change 、 keyup ）、コンポーネントで指定された指定されたメソッドを呼び出します。 以下の例では、ボタンがクリックされると、コンポーネントの cockPotato（）メソッドが呼び出されます。
<button (click)="cookPotato()"></button>
双方向
双方向データバインディング：[（ngModel）] =“ value”
ボックス構文でバナナと呼ばれるものを使用すると、双方向のデータバインディングにより、データフローを双方向にすることができます。 この例では、user.emailデータプロパティが入力の値として使用されていますが、ユーザーが値を変更すると、コンポーネントプロパティが自動的に新しい値に更新されます。
<input type="email" [(ngModel)]="user.email">
