[Angular] ng-containerでレンダリングされないダミーの空コンテナを作る

複数の要素をラップする空のダミー要素を作りたい

Angular では ng-container というコンポーネントを使うことで、HTMLにレンダリングされない要素を書くことができます。これを使うことで、複数の要素をにラップするコンテナを疑似的に作ることができます。

React(JSX)でいうと <React.Fragment> みたいなものです。

例えば、繰り返し ngFor で複数の要素をひとまとめに描画する場合に、ラップする要素を使わなくてもよくなります。

<div *ngFor="let item of array;">
    <p>{{ item }}<p>
    <button>{{ item }}</button>
</div>

例えば上記のように書くと、div > p > button の要素が繰り返し出力されますが、場合によってはラップしている divタグはなしにして、pタグ, buttonタグだけが繰り返し表示されたいということもあります。

その場合、ラップする要素として ng-container を使うことでレンダリング時に表示されないダミー要素を使うことができます。

<ng-container *ngFor="let item of array;">
    <p>{{ item }}<p>
    <button>{{ item }}</button>
</ng-container>

これがレンダリングされると、ng-container は空になるので、pタグとbuttonタグのみが表示されることになります。

以上。