AngularにおけるDOM要素のプロパティへの値のバインド

Angularでは、タグへの値のバインドには2つのタイプがあります： タグの属性へのバインドと、DOM要素のプロパティへのバインドです。 通常、これらは同じものですが、場合によっては違いが重要になります。

例を使ってこれらの2つの方法を見てみましょう。 クラスに以下のプロパティがあるとします：

app/app.component.tsexport class AppComponent {
  public text: string = 'abcde';
}

このプロパティの値をtextareaのテキストとして出力してみましょう。

app/app.component.html<textarea>{{ text }}</textarea>

次に、placeholder属性に出力してみましょう：

app/app.component.html<textarea placeholder="{{ text }}"></textarea>

次に、データをDOM要素のプロパティに直接書き込んでみます。 そのためには、属性名を角括弧で囲みます：

app/app.component.html<textarea [value]="text"></textarea>