Angular のデータバインディングの種類に「属性バインディング」と「プロパティバインディング」があるが明確に違いがわかっていなかったのでメモ
属性バインディングとプロパティバインディングの違い
そもそも HTML 属性か DOM プロパティかの違いがある
HTML 属性の場合 button に disabled があるだけでその button は無効になる
<button disabled>Button</button>
- disabled 属性をロジックによって着脱したい場合は以下のように書く
<button [attr.disabled]="condition ? 'disabled' : null">Button</button>
- disabled プロパティを使う場合は以下のように書く
<button [disabled]="condition ? true : false">Button</button>
違い
attr.
を付けると属性バインディングになる- プロパティバインディングは値に boolean を渡せばよいが、属性バインディングには null か no-null が必要
- 対象の HTML 要素に同じ名前のプロパティと属性がある場合は「プロパティバインディング」を使ったほうが、条件式は簡潔になる(boolean を返す条件式にすればよいので)
- しかし、場合によっては HTML 要素の属性にしかないものもあるのでその場合は「属性バインディング」を使うことになりそう