プロパティバインディング ― [ ]

導入

HTML タグの属性にクラスの値を結び付けるには、属性を角かっこ [ ] で囲みます。これをプロパティバインディングと呼びます。

説明

[属性]="式" で、クラスの値を属性に流し込みます。

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <img [src]="imageUrl" [width]="size" alt="ロゴ" />
    <p [title]="tip">マウスを乗せると説明が出ます</p>
    <button [disabled]="locked">押せないボタン</button>
  `,
})
class AppComponent {
  imageUrl: string = 'https://angular.dev/assets/images/press-kit/angular_wordmark_gradient.png';
  size: number = 200;
  tip: string = 'これはツールチップです';
  locked: boolean = true;
}

• [src]="imageUrl" … 属性 src にクラスの imageUrl を結び付けます（[ ] があると「値は式」の意味）。
• [disabled]="locked" … locked が true の間、ボタンは押せません。
• [ ] を付けないただの src="imageUrl" は、文字列 “imageUrl” がそのまま入ってしまいます。違いに注目。

やってみよう

locked を false に変えるとボタンが押せるようになります。size の数値を変えて画像の大きさが変わるか確かめましょう。