プロパティ・バインディング

プロパティ・バインディングは、 コンポーネントのプロパティからテンプレートの DOM 属性 (アトリビュート) に値を渡す方法です。

具体例を挙げます。次のテンプレートでは input 要素の [value] 属性に、コンポーネントの message プロパティがバインドされています。

<p><input [value]="message"></p>

コンポーネント内ではプロパティは次のように定義されています。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message = 'Hello!';

}

これを実行すると、次のようになります。

コンポーネントのプロパティに、"Hello!" という文字がセットされ、さらにテンプレートで value とプロパティがバインドされたため、 文字が表示されました。