ディレクティブは記述ルールに着目
AngularJSでは、ディレクティブと呼ばれる独自のHTML記述が利用できます。Angular 2で利用できる全てのディレクティブは、公式WebページのAPIリファレンスで検索できます。
ここでは繰り返し（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の要素のみ赤文字で「※国産です」が表示されます。
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>
