【Angular】プロパティバインディングとは？「使い方」や「プログラム例」などを解説！

この記事ではAngularの『プロパティバインディング』について、

• Angularのプロパティバインディングとは
• プロパティバインディングの構文
• プロパティバインディングのプログラム例
• プロパティバインディングの別構文

などを図を用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

Angularのプロパティバインディングとは

Angularのプロパティバインディングは、コンポーネントのプロパティから、テンプレートのHTML要素に対して値を渡す方法です。

例えば、以下のプログラムでは、input要素のvalueプロパティに対して、AppComponentのmessageプロパティをバインドしています。

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

@Component({
  selector: 'app-root',
  template: `<input [value]="message" />`,
})
export class AppComponent {
  message = 'Hello Angular!';
}

その結果、テンプレートは以下の様になります。

template: `<input [value]=" Hello Angular!" />`,

プロパティバインディングの構文を以下に示します。バインド対象となるプロパティをブラケット[...]で囲むのが特徴です。

上記のプログラムを実行すると、以下の様になります。

AppComponentのmessageプロパティにHello Angular!という文字列が代入され、テンプレート側では、input要素のvalueプロパティに対して、AppComponentのmessageプロパティをバインドされているため、画面上にはHello Angular!という文字が表示されています。

【プロパティバインディングのプログラム例】ボタンの無効化(disabled)を制御する

以下に、Angularのプロパティバインディングを用いてボタンの無効化(disabled)を制御する簡単なプログラム例を示しています。

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

@Component({
  selector: 'app-root',
  template: `
    <button [disabled]="isDisabled">Click me</button>
    <button (click)="switchButtonState()">enable/disable</button>
  `,
})
export class AppComponent {
  isDisabled = true;

  switchButtonState() {
    this.isDisabled = !this.isDisabled;
  }
}

このプログラムでは、isDisabledプロパティを用いてbutton要素のdisabledプロパティを制御しています。初期状態ではisDisabledはtrueなので、「Click me」と表示されるボタンは無効化されています。

また、「enable/disable」と表示されるボタンをクリックすることでswitchButtonState()メソッドを呼び出します。switchButtonState()メソッドではisDisabledの真偽値を反転させて、「Click me」ボタンの無効化状態を切り替えます。

デベロッパーツールを開いてDOMを見ると、ボタン要素のdisabled属性がアプリケーションの状態によって変化していることが確認できます。初期状態では、isDisabledがtrueなので、「Click me」ボタンは無効化され、その結果、HTML要素は以下のようになります。

<button disabled>Click me</button>

「enable/disable」ボタンをクリックすると、isDisabledがfalseになり、「Click me」ボタンは有効になります。その結果、HTML要素は以下のように変化します。

<button>Click me</button>

プロパティバインディングの別構文

先ほど、プロパティバインディングでは、バインド対象となるプロパティをブラケット[…]で囲むと説明しましたが、以下に示すように「bind-プロパティ名 = “任意の式”」の形式でも、プロパティに式を割り当てることができます。

@Component({
  selector: 'app-root',
  template: `<input bind-value="message" />`,
})

また、interpolation(補間){{...}}を用いて、直接プロパティに式を割り当てることもできます。

@Component({
  selector: 'app-root',
  template: `<input value="{{ message }}" />`,
})

本記事のまとめ

この記事ではAngularの『プロパティバインディング』について、以下の内容を説明しました。

• Angularのプロパティバインディングとは
• プロパティバインディングの構文
• プロパティバインディングのプログラム例
• プロパティバインディングの別構文

お読み頂きありがとうございました。