Angular データ バインディング

#前提条件
ng new property-binding-demong g c home

文字列補間

Angular では、Interpolation を使用してコンポーネントからビュー (DOM) にデータを表示します.

home.component.ts のコード

public appName : string  = 'My first string interpolation';

home.component.html は次のようになります.

<h3>String interpolation</h3>
<p>{{appName}}</p>

イベントバインディング
アクション (マウス クリックまたはキーボード アクション) がある場合、イベントが発生します.イベントを DOM 要素にバインドするには、さまざまな方法があります.

home.component.ts には、イベント パラメータを受け取る関数があります.

public logEvent(event) {
  console.log(event.target)
}

home.component.html は、次のように logEvent() メソッドを呼び出す必要があります.

<h3>Event Binding</h3>
<button (click)="logEvent($event)">Click ME</button>

プロパティバインディング
これは、コンポーネントのプロパティからのデータを DOM 要素にバインドするために使用されます. []で表します.

public userName : string  = 'Bob';

home.component.html 入力要素では、userName 値で初期化されます

<h3>Property binding</h3>
<input type="text" [value]="userName">

クラスバインディング

動的なスタイリングでコンポーネントを作成するのに役立ちます.

home.component.css で css クラスを定義する

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

home.component.ts でプロパティを宣言し、css クラス名の 1 つをバインドして、その値を変更する関数を作成します.

public colorProperty : string = 'red';

public changeColor() {
    this.colorProperty === 'red' ? this.colorProperty = 'blue' : this.colorProperty ='red'
 }

以下のように、home.component.html コンポーネントからビューにバインドします.

<h3>Style binding</h3>
<div [style.color]="colorProperty">
  Style binding content
</div>
<button (click)='changeColor()'>Change Color</button>

双方向バインディング

双方向の相互作用であり、データは双方向 (コンポーネントからビューへ、ビューからコンポーネントへ) に流れます.
FormModule は、双方向のデータ バインディングを有効にするために必要な設定を行うため、インポートする必要があります.

home.component.ts で twoWayBinding の別のプロパティを作成します.

 public twoWayBinding : string = 'init';

以下のように HomeComponent ビュー (home.component.html) を更新します.

<h3>Two-way data binding</h3>
<input type="text" [(ngModel)]="twoWayBinding"/>
{{twoWayBinding}}

プロパティはフォーム コントロール ngModeldirective にバインドされ、テキスト ボックスにテキストを入力すると、プロパティにバインドされます.