Angular テンプレートにおける <ng-container> と <template> の比較

<ng-container> とは？

<ng-container> は、DOM 要素を生成せずに、テンプレート内で要素をグループ化するための構造要素です。 主に以下の用途で使用されます。

• 条件付きでコンテンツを表示/非表示を切り替える
• ループ内で繰り返し要素を表示する
• コンポーネントテンプレートをより読みやすく整理する

<ng-container> は DOM 要素を生成しないため、パフォーマンスの向上にも役立ちます。

<template> とは？

<template> は、DOM 要素を生成し、その中にコンテンツを埋め込むための要素です。 主に以下の用途で使用されます。

• コンポーネントテンプレートから繰り返し要素を抽出する
• コンポーネントテンプレート内に別のコンポーネントを埋め込む

<template> は DOM 要素を生成するため、<ng-container> よりもパフォーマンスが低下する可能性があります。

<ng-container> と <template> の比較表

具体的な使い分け例

• 条件分岐

<ng-container *ngIf="condition">
  <h1>コンテンツ</h1>
</ng-container>

<template [ngIf]="condition">
  <h1>コンテンツ</h1>
</template>

• ループ

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

<template [ngFor]="let item of items">
  <div>{{item}}</div>
</template>

• テンプレート整理

<ng-container>
  <h1>ヘッダー</h1>
  <p>本文</p>
  <footer>フッター</footer>
</ng-container>

<template>
  <h1>ヘッダー</h1>
  <p>本文</p>
  <footer>フッター</footer>
</template>

<div>
  <h1 *ngIf="condition">条件が真の場合のみ表示</h1>
  <p *ngIf="!condition">条件が偽の場合のみ表示</p>
</div>

<div>
  <template [ngIf]="condition">
    <h1>条件が真の場合のみ表示</h1>
  </template>
  <template [ngIf]="!condition">
    <p>条件が偽の場合のみ表示</p>
  </template>
</div>

<div *ngFor="let item of items">
  <p>{{item}}</p>
</div>

<div>
  <template ngFor let-item [ngForOf]="items">
    <p>{{item}}</p>
  </template>
</div>

<ng-container>
  <h1>ヘッダー</h1>
  <p>本文</p>
  <footer>フッター</footer>
</ng-container>

<template>
  <h1>ヘッダー</h1>
  <p>本文</p>
  <footer>フッター</footer>
</template>

• <ng-container> と <template> は、互換性があります。 どちらを使用しても、同じ結果が得られます。
• どちらを選択するかは、開発者の好みや状況によって異なります。

*ngIf ディレクティブは、条件付きで要素を表示/非表示を切り替える最も一般的な方法です。

<div *ngIf="condition">
  <h1>コンテンツ</h1>
</div>

*ngFor ディレクティブは、ループ内で繰り返し要素を表示する最も一般的な方法です。

<div *ngFor="let item of items">
  <p>{{item}}</p>
</div>

コンポーネントのテンプレート

コンポーネントのテンプレートを使用して、別のコンポーネントを埋め込むことができます。

<app-my-component></app-my-component>

ng-content プロジェクション

ng-content プロジェクションを使用して、親コンポーネントのテンプレートから子コンポーネントのテンプレートにコンテンツを挿入できます。

<parent-component>
  <ng-content></ng-content>
</parent-component>

<child-component>
  <h1>コンテンツ</h1>
</child-component>

ViewChild と ContentChild デコレータ

ViewChild と ContentChild デコレータを使用して、コンポーネントテンプレート内の要素にアクセスできます。

<div #myElement>
  <h1>コンテンツ</h1>
</div>

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {
  @ViewChild('myElement') myElement: ElementRef;

  constructor() {}

  ngOnInit() {
    console.log(this.myElement.nativeElement);
  }
}