← Angular コース
3. プロパティバインディング — [ ] で値を流し込む
HTML要素の属性にクラスの値を渡すには、属性名を角カッコで囲んで [src]="imageUrl" のように書きます。これをプロパティバインディングと呼び、右辺の式が評価されて、その結果が要素のプロパティに設定されます。クラス側の値が変われば、要素の状態も自動で更新されます。
実務では、画像URLの動的な切り替え、入力欄の初期値、ボタンの活性制御([disabled])など、「要素の状態をデータで決めたい」場面の定番です。文字の表示は補間、属性への受け渡しはプロパティバインディング、と使い分けます。
角カッコを付け忘れて disabled="isSaving" と書くと、式が評価されず isSaving というただの文字列が渡ってしまいます。「値を評価してほしい場所には角カッコ」と覚えておくと、初期によくあるバグを避けられます。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import { Component } from '@angular/core';
@Component({
selector: 'app-avatar',
// [属性名]="式" でクラスの値を要素に流し込む
template:
'<img [src]="imageUrl" [alt]="caption">' +
'<button [disabled]="isSaving">保存</button>',
})
export class AvatarComponent {
imageUrl = '/assets/avatar.png';
caption = 'プロフィール画像';
isSaving = true; // true の間、保存ボタンは押せない
}