ng-container で不要なタグを出力するのを防ぐ

こんにちは!kossyです!



さて、今回はAngularのディレクティブの一つであるng-containerの使い方について、
ブログに残してみたいと思います。



ng-containerってなに?

Angular日本語ガイドによると、

は Angular パーサーによって認識される構文要素です。 ディレクティブ、コンポーネント、クラス、またはインターフェースではありません。 JavaScript の if ブロックの中括弧のようなものです

引用元:
Angular 日本語ドキュメンテーション

何ができるの?

タイトルにもありますが、不要なタグが出力されなくなります。

qiita.com


divタグの中でngForをするとdivタグも繰り返し出力されてしまいますが、
ng-containerを使えばそれを防ぐことができます。

公式ドキュメントによると、

あるとき、あなたは指定した条件が true なものだけで HTML ブロックを繰り返したいと思います。 あなたは同じホスト要素に *ngFor と *ngIf の両方を配置 しよう とするでしょう。 Angular はそれを許しません。1つの要素に適用できる構造ディレクティブは1つだけです。

その理由は単純です。構造ディレクティブは、ホスト要素とその子孫を使って複雑なことを行えます。 2つのディレクティブが同じホスト要素を要求するとき、どちらが優先されるでしょうか? NgIf と NgFor のどちらが先になるでしょうか。 NgIf は NgFor の効果をキャンセルできるでしょうか?もしそうなら (そしてそれはそうあるべきだと思われる)、Angular は他の構造ディレクティブをキャンセルする能力をどのように一般化すべきでしょうか?

これらの質問に対する簡単な答えはありません。複数の構造ディレクティブを禁止することでその質問を無意味にします。 このユースケースでは簡単な解決策があります。*ngFor 要素をラップするコンテナ要素に *ngIf を追加します。 一方または両方の要素をng-containerにすることができるので、余分な階層の HTML を導入する必要はありません。

出典:
Angular 日本語ドキュメンテーション

ngForとngIfを両方使いたいがために余計にdivを定義する必要はありませんよ、ってことですね。




勉強になりました。