サンプルコードで身につける: プロパティバインディング — [ ] で値を流し込む

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1画像のURLをデータで決める

プロパティバインディングの最小例で、[src] にクラスの値を流し込んで画像を表示します。HTMLに直接URLを書くのと違い、クラス側の値を差し替えれば画像も変わります。ユーザーごとのアバター画像など「データで決まる画像」の表示はこの形です。

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

@Component({
  selector: 'app-photo',
  // [src]="式" で、photoUrl の値が src プロパティに設定される
  template: '<img [src]="photoUrl" alt="風景写真">',
})
export class PhotoComponent {
  photoUrl = '/assets/landscape.png';
}

2ボタンの活性・非活性を制御する

[disabled] に真偽値をバインドすると、ボタンが押せるかどうかをデータで制御できます。角カッコがないと文字列の 'agreed' が渡ってしまい意図通り動かない、という補間との違いを体感できる例です。利用規約に同意するまで送信できないフォームなどの定番パターンです。

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

@Component({
  selector: 'app-submit-button',
  // 角カッコがあるので !agreed が式として評価される
  template: '<button [disabled]="!agreed">送信</button>',
})
export class SubmitButtonComponent {
  agreed = false; // false の間はボタンが押せない
}

3入力欄の初期値とプレースホルダー

input要素の [value] や [placeholder] にも同じ形で値を流し込めます。プロパティバインディングはimg/button専用ではなく、あらゆる要素のプロパティに使える汎用の仕組みだと分かる例です。編集フォームに保存済みの値を初期表示する場面で頻出します。

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

@Component({
  selector: 'app-nickname-field',
  // どんな要素のどんなプロパティにも同じ形でバインドできる
  template:
    '<label>ニックネーム</label>' +
    '<input [value]="savedNickname" [placeholder]="hint">',
})
export class NicknameFieldComponent {
  savedNickname = 'guest_01'; // 保存済みの値を初期表示する
  hint = 'ニックネームを入力';
}

4リンク先をデータで切り替える

[href] と [title] を使い、リンク先URLと補足説明をデータで決める例です。1つの要素に複数のバインディングを並べられることを示しています。実務ではAPIから受け取ったURL(外部サイトやダウンロードリンクなど)をリンクにする場面で使います。

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

@Component({
  selector: 'app-doc-link',
  // 1つの要素に複数のバインディングを並べられる
  template:
    '<a [href]="docUrl" [title]="docTitle">公式ドキュメントを開く</a>',
})
export class DocLinkComponent {
  docUrl = 'https://angular.jp/';
  docTitle = 'Angular 日本語ドキュメント';
}

5商品カードを丸ごとデータで組み立てる

商品オブジェクト1つから、画像・名前・購入ボタンの状態までを組み立てる実務寄りの例です。文字の表示は補間、属性への受け渡しはプロパティバインディング、という使い分けが1つのテンプレートに同居しています。ECサイトの商品カードはほぼこの構造です。

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

@Component({
  selector: 'app-product-card',
  // 文字は {{ }}、属性は [ ] と使い分ける
  template:
    '<img [src]="product.imageUrl" [alt]="product.productName">' +
    '<h2>{{ product.productName }}</h2>' +
    '<button [disabled]="product.stock === 0">購入する</button>',
})
export class ProductCardComponent {
  product = {
    productName: 'ワイヤレスマウス',
    imageUrl: '/assets/mouse.png',
    stock: 0, // 在庫切れなので購入ボタンは押せない
  };
}