Angular 入門

ホーム > データ・バインディング > 2 方向 (two-way) バインディング

2 方向 (two-way) バインディング

ここでは 2 方向 (two-way) バインディングについて説明します。

インターポレーションプロパティ・バインディングでは、 プロパティの値に従って値を表示するとか値を設定するなどしました。プロパティとのバインドはテンプレートで [ ] を使いました。

さらにイベント・バインディング では、 DOM イベントのハンドラを指定することで、change イベントなどが発生したタイミングでプロパティを書き換えるなどが可能になりました。イベントバインディングはテンプレートで ( ) で書きました。

Two-way バインディングを使うと、input 要素の change イベントが発生した時に直ちに変更するプロパティを指定することが可能になります。

Two-way バインディングは [(ngModel)] にてプロパティと接続します。

次の例をみてみましょう。

<input type="text" [(ngModel)]="greetings">
<div>{{greetings}}</div>

ここでは input 要素と greetings というプロパティが Two-way バインドされています。 すると、テキスト入力型の input 要素の値を書き換えると、直ちに greetings プロパティが書き換えられます。greetings プロパティはインターポレーションで内容を表示するようにされていますので、 入力ボックスで書き換えた先から更新された値が直ちに表示されます。

尚、[(ngModel)] は実際にはディレクティブのひとつです。

ホーム > データ・バインディング > 2 方向 (two-way) バインディング