ディレクティブは記述ルールに着目
AngularJSでは、ディレクティブと呼ばれる独自のHTML記述が利用できます。Angular 2で利用できる全てのディレクティブは、公式WebページのAPIリファレンスで検索できます。
![図3 Angular 2のディレクティブをAPIリファレンスで検索](http://cz-cdn.shoeisha.jp/static/images/article/9596/9596_003_s.gif)
ここでは繰り返し(NgFor)と条件分岐(NgIf)を例に、Angular 2のディレクティブ利用例を説明します。まずAppComponentコンポーネントにリスト8のような変数phonesを定義します。phonesはスマートフォンの情報を格納しており、name(名前)、vendor(メーカー)、locale(国と地域)の値を保持するJavaScriptオブジェクトの配列になります。
phones = [ {"name":"Xperia Z5", "vendor":"ソニー", "locale": "JP"}, {"name":"Galaxy S7 edge", "vendor":"サムスン", "locale": "KR"}, {"name":"Zenfone 3", "vendor":"エイスース", "locale": "TW"}, {"name":"HUAWEI P9", "vendor":"ファーウェイ", "locale": "CN"}, {"name":"arrows M03", "vendor":"富士通", "locale": "JP"}, ];
phones配列の各要素を順番に表示するように、ディレクティブをリスト9のように記述します。
<ul> <!-- *ngFor属性で繰り返し ...(1)--> <li *ngFor="let phone of phones"> <!-- phoneオブジェクトの値を参照 ...(2)--> {{phone.name}}は{{phone.vendor}}の製品です。 <!-- *ngIf属性で条件分岐 ...(3)--> <span *ngIf="phone.locale=='JP'" [ngStyle]="{'color':'red'}"> ※国産です </span> </li> </ul>
(1)のliタグに付与された*ngFor属性で繰り返しを指定します。「let phone of phones」は、ループ内でphones配列の各要素をphoneオブジェクトとして参照する意味で、(2)でphoneオブジェクトのname、vendorプロパティをデータバインディングで表示しています。
(3)は条件分岐です。spanタグに付与された*ngIf属性内の「phone.locale=='JP'」で、localeプロパティがJPである場合のみspanタグの内容を表示するよう指定します。[ngStyle]はCSSを設定するAngular 2のディレクティブで、ここでは赤文字になるよう設定しています。
リスト8、9を実行すると図4のようにオブジェクトの各要素がリスト表示され、localeがJPの要素のみ赤文字で「※国産です」が表示されます。
![図4 繰り返しと条件分岐のディレクティブを利用した表示(angular2-003-directive)](http://cz-cdn.shoeisha.jp/static/images/article/9596/9596_004.gif)
AngularJS 1でリスト9と同じ表示を行う記述はリスト10のようになります。*ngForの代わりにng-repeat属性、*ngIfの代わりにng-if属性、[ngStyle]の代わりにng-style属性を利用します。
<ul> <!-- ng-repeatで繰り返し --> <li ng-repeat="phone in phones"> <!-- phoneオブジェクトの値を参照 --> {{phone.name}}は{{phone.vendor}}の製品です。 <!-- ng-ifで条件分岐 --> <span ng-if="phone.locale=='JP'" ng-style="{'color':'red'}"> ※国産です </span> </li> </ul>