Angular

Angular ng-container ディレクティブ

2021年2月6日

ng-container ディレクティブは、ホストエレメントを生成せずに、論理的なグルーピングを行うことのできる機能です。説明文よりも、実際のコードを見る方がわかりやすいです。

例えば、ngFor ディレクティブを適用するタグに div を使うとします。実装コードは次のようになります。

<div *ngFor="let item of items">
  <div class="item">{{ item.id }} - {{ item.title }}</div>
</div>

上記コードの実行結果は次のようになります。各 item 要素(div タグ)の親要素として div タグが出力されています。この親要素の div タグは、ngFor を適用した div タグです。

<app-root _nghost-oxy-c11="" ng-version="11.0.9">
  <div _ngcontent-oxy-c11="">
    <div _ngcontent-oxy-c11="" class="item">1 - item 1</div>
  </div>
  <div _ngcontent-oxy-c11="">
    <div _ngcontent-oxy-c11="" class="item">1 - item 2</div>
  </div>
  <div _ngcontent-oxy-c11="">
    <div _ngcontent-oxy-c11="" class="item">3 - item 3</div>
  </div>
  <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
</app-root>

DOM の総量がそれほど多くないアプリケーションではこのままでも問題のない実行パフォーマンスが出ると思いますが、画面が複雑で DOM 要素が多いアプリケーションではできるだけ不要な DOM の生成は避けたいところです。不要な DOM 生成は避けつつ、かつ、ngFor による繰り返し処理を行う際には、ng-container を利用することができます。

先程の ngFor の実装を、ng-container を組み合わせるように書き換えてみます。

<ng-container *ngFor="let item of items">
  <div>{{ item.id }} - {{ item.title }}</div>
</ng-container>

実行結果は次のとおりです。ngFor が適用されている ng-contianer は DOM 要素を生成していないことがわかります。つまり、ng-container 配下の子要素(ここでは item 要素(div タグ))を論理的にまとめ上げることができました。

<app-root _nghost-ynr-c11="" ng-version="11.0.9">
  <div _ngcontent-ynr-c11="">1 - item 1</div>
  <!--ng-container-->
  <div _ngcontent-ynr-c11="">1 - item 2</div>
  <!--ng-container-->
  <div _ngcontent-ynr-c11="">3 - item 3</div>
  <!--ng-container-->
  <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
</app-root>

今回は ng-container と ngFor を組み合わせる例を紹介しましたが、ngFor 以外にも ngIf ディレクティブと組み合わせる局面も多くあります。

-Angular