JavaScript
angular

Angularにおけるディレクティブの概要と「ngIf」「ngFor」について調べてみた

はじめに

「ngIf」や「ngFor」は用語としてディレクティブと呼ばれている。ディレクティブは他にもいくつか種類があるが、現時点で自分が利用したのは「ngIf」と「ngFor」だけなので少し調べてみたいと思った。

ディレクティブとは

AngularではビューにHTMLをベースとしたテンプレートエンジンを採用している。このHTMLに対して、「ngIf」や「ngFor」のような独自の要素/属性を追加することで、ページに機能を付与している。このようなカスタムの要素/属性をディレクティブと呼ぶ。
ディレクティブの種類は以下の通り。

名前 概要
ngIf 式の真偽値によって表示/非表示を切り替え
ngSwitch 式の値によって表示を切り替え
ngFor 配列をループ処理
ngTemplateOutlet 用意されたテンプレートの内容をインポート
ngComponentOutlet 用意されたコンポーネントをインポート
ngStyle 要素にスタイルプロパティを付与
ngClass 要素にクラスを着脱
ngPlural 数値に応じて出力を切り替え

ngIfについて

ngIfディレクティブはJavaScriptのif文に相当する。指定された条件がtrueの場合にだけ、配下の要素を表示する。

①よく利用される記述

@Component({
  selector: 'ng-if-simple',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show">Text to show</div>
`
})

class NgIfSimple {
  show: boolean = true;
}

②elseテンプレートで偽のときのテンプレートを指定できる

@Component({
  selector: 'ng-if-else',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show; else elseBlock">Text to show</div>
    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
`
})
class NgIfElse {
  show: boolean = true;
}

<div *ngIf="show; else elseBlock">Text to show</div>に着目してみると、「showプロパティがtrueであれば配下のコンテンツを、そうでなければelseBlockテンプレートを表示しなさい」という意味になる。(elseBlockにあたる部分は任意のテンプレート名を指定できる)
そして、ここでは<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
テンプレートを定義するのは、要素の役割であり、テンプレートの名前は#名前の形式で宣言する。
また、<ng-template>はコンポーネントの中であればどこでも定義できるが、通常は可読性を考慮してngIfの直後に記述する。
参考記事
https://blog.lacolaco.net/post/ng4-feature-ngif/

ngForについて

ngForディレクティブは、指定された配列から順に要素を取り出し、その内容をループ処理する。

//ngFor構文
<element *ngFor="let 任意の変数 of 処理対象に配列">
contents
</element>

詳しくは、こちらの記事が分かりやすいので参照していただければ。
http://www.buildinsider.net/web/angulartips/026