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 ディレクティブと組み合わせる局面も多くあります。