Carpe Diem

備忘録

Angularでのコンポーネント→ビューのバインディング

Angular

概要

Angularではコンポーネント→ビュー方向のバインディングは以下の４種類があります。

これらの違いと使い分けを説明します。

環境

  • Angular v5.2.9
  • angular-cli v1.7.3

属性(Attribute)とプロパティ(Property)の違いについて

そもそもこの２つについて理解していないといけません。
日本語だとどちらも属性で分かりにくいのですが、少し分かりやすく言うと

  • HTML attribute
  • DOM property

の違いです。詳細な説明はこちらのブログが分かりやすいです。

HTML attribute と DOM property - Please Sleep

このAttributeとPropertyは一致するものもあればしないものもあります。
Angularのドキュメントにも以下のように書かれています。

  • A few HTML attributes have 1:1 mapping to properties. id is one example.
  • Some HTML attributes don't have corresponding properties. colspan is one example.
  • Some DOM properties don't have corresponding attributes. textContent is one example.
  • Many HTML attributes appear to map to properties ... but not in the way you might think!

なのでこれを理解した前提でないと期待する挙動にならないケースがあるので注意してください。

説明

プロパティバインディング

Angularで一番よく使われるバインディングです。
基本的にこれを使います。

<img [src]="ImageUrl">

と書いた場合、srcプロパティにコンポーネント側のImageUrlの値をバインドします。

属性バインディング

先の説明であったように、AttributeとPropertyは一致するものもあればしないものもあります。
例えばcolspanはDOM Propertyには存在しないため、HTML Attributeとしてバインドする必要があります。以下の通りにattr.xxxとします。

<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

クラスバインディング

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

こんな感じでclassを変更することが出来ます。 ただいじる値が複数ある場合はNgClassディレクティブの方が推奨されています。

スタイルバインディング

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

こんな感じにstyle.xxxというフォーマットでstyleをいじれます。
ただいじる値が複数ある場合はNgStyleディレクティブの方が推奨されています。

使い分け

プロパティバインディングと属性バインディングの使い分け

基本的にプロパティバインディングを使用します。もしPropertyがない場合は属性バインディングを使います。
例えば

<input id="the-input" type="text" value="Name:">

とある時に、valueにJohnという名前を入れたとして、各メソッドやフィールドの値は以下のようになります。

theInput.value                 // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue          // returns "Name:"

このように属性は初期値、プロパティは現在値を返すため、属性バインディングを使うと期待する挙動にならないケースがあります。

クラスバインディングとスタイルバインディングの使い分け

基本的にクラスバインディングを使います。
なぜならスタイルバインディングはテンプレート・コンポーネントの方にスタイル情報が入って良くないためです。
出来る限りstyleはCSSの方でまとめていた方が保守しやすいです。

ただAtomicデザインなどで、atomのstyleを弄りたい、みたいなケースではスタイルバインディングが有用なケースも多々あります。

まとめ

Angularのコンポーネント→ビューでは以下の4つのバインド方法があり、

プロパティバインディング、クラスバインディングを優先的に使用してください。

ソース