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

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

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

export class AppComponent {
	public text: string = 'abcde';
}

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

<textarea>{{ text }}</textarea>

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

<textarea placeholder="{{ text }}"></textarea>

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

<textarea [value]="text"></textarea>

入力欄があります。そのvalueプロパティにデータを書き込んでください。