序章

ng-containerは、Angular 2+で利用可能な要素であり、構造ディレクティブのホストとして機能できます。

この記事では、ng-containerで対処できるシナリオについて説明します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

ng-containerを使用して冗長な要素を回避する

Angularでは、要素に複数のテンプレートバインディングを使用することはできません。

*ngIfと*ngForの構造ディレクティブを組み合わせたこの例では、コンパイルされません。

Invalid Example
<div *ngIf="todos" *ngFor="let todo of todos">
  {{ todo.content }}
</div>

このコードをコンパイルしようとすると、次のエラーが発生します。

Invalid Example Output
Can't have multiple template bindings on one element. Use only one attribute prefixed with *

回避策の1つは、テンプレートバインディングを分離し、ラッパーを作成することです。

Valid Example
<div *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</div>

欠点の1つは、このアプローチでは、冗長なdiv要素がDOMに導入されることです。

Valid Example Output
<div>
  <div>
    Todo Content 1
  </div>
  <div>
    Todo Content 2
  </div>
  <div>
    Todo Content 3
  </div>
</div>

ここで、ng-container要素が役立ちます。

以下はまったく同じように動作しますが、実行時にDOMに要素を追加する必要はありません。

Improved Valid Example
<ng-container *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</ng-container>

これにより、次のマークアップが生成されます。

Improved Example Output
<div>
  Todo Content 1
</div>
<div>
  Todo Content 2
</div>
<div>
  Todo Content 3
</div>

ng-containerは、ngIfがインラインコンテンツで使用されている場合にも役立ちます。

Example
<div>
  <span *ngIf="error">Oops:</span> {{ message }}
</div>

errorがtrueの場合、次のマークアップが生成されます。

Example Output
<div>
  <span>Oops:</span> An error occurred.
</div>

span要素をng-containerに置き換えると、DOMに追加される冗長なspan要素が減ります。

Improved Example
<div>
  <ng-container *ngIf="error">Oops:</ng-container> {{ message }}
</div>

errorがtrueの場合、次のマークアップが生成されます。

Improved Example Output
<div>
  Oops: An error occurred.
</div>

アプリケーションのマークアップの量を減らすと、最終的にDOMツリーが小さくなり、カスケードスタイルシートセレクターの副作用を回避するのに役立ちます。

ng-containerを使用して有効なHTML標準を確認する

ng-containerは、divまたはspanの使用が有効なHTMLではない状況での無効なHTMLマークアップの問題を解決することもできます。

次の例では、li要素がul要素の直接の子であると想定されているため、無効なHTMLが生成されます。

Invalid Example
<ul>
  <div *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Done'">
      {{ todo.content }}
    </li>
  </div>
</ul>

divをng-containerに置き換えると、次の問題が解決します。

Valid Example
<ul>
  <ng-container *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Done'">
      {{ todo.content }}
    </li>
  </ng-container>
</ul>

有効なHTMLを使用すると、より厳しいテストと要件を満たし、ブラウザとデバイス間でのサポートが保証されます。

結論

この記事では、冗長な要素や無効なHTML標準など、Angularアプリケーションでng-containerが対処する問題について説明しました。

Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。