【Angular】バインディングのパターン

結論

• プロパティバインディング→「右側の式を評価して、左側のプロパティに値を渡す」
• そのプロパティが、HTML要素のものなのか、ディレクティブのものなのか、コンポーネントのものなのかを区別する必要がある

詳細

パターン①：HTML要素のプロパティに渡す

<input [type]="inputType">

inputType = 'password';

input 要素がもともと持っている type プロパティに値を渡している。

パターン②：ディレクティブのプロパティに渡す

<input [ngClass]="{ 'error': hasError }">

hasError = true;

• [ngClass]：NgClass ディレクティブの入力プロパティ(@input()で外部から値を受け取れるようにしたプロパティ)に値を渡す
• { 'error': hasError }：渡す値を作る式
• hasError が true：error クラスを適用する
  つまり、今度はHTML要素がもともと持っているプロパティではなく、ディレクティブが提供する入力プロパティに値を渡す

パターン③：Angularコンポーネントのプロパティに渡す

<app-user-card [user]="currentUser"></app-user-card>

app-user-card は独自に作ったAngularコンポーネントだとする

@Input() user!: User;

• この user は、コンポーネントが外部から値を受け取るために用意した入力プロパティ
• currentUser の値を、app-user-card コンポーネントの user に渡しているよ

区別

• <input> や <button> など → HTML要素
• <app-user-card> など → Angularコンポーネントの可能性が高い
• <input> に [ngClass] などが付いている → ディレクティブの可能性がある