とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

属性バインディングとプロパティバインディングの違い

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 要素の属性にしかないものもあるのでその場合は「属性バインディング」を使うことになりそう

参考