ng-templateとngTemplateOutletで共通のテンプレート描画をする[Angular]

はじめに
ng-templateとは
ngTemplateOutletとは
ng-templateとngTemplateOutletで共通のテンプレート描画をする
パラメータを渡して異なる部分を作る
まとめ

はじめに

ng-templateとngTemplateOutletを使って、テンプレートの共通処理を綺麗に書くための方法を解説します。

Angularのバージョンは18です。

ng-templateとは

ng-template は、Angularのテンプレート要素の一つで、HTMLの一部をテンプレートとして定義するために使用します。

通常のHTML要素とは異なり、ng-templateはDOMにレンダリングされません。実際のHTMLとしてレンダリングするには、コンポーネントで制御したり、ngTemplateOutletディレクティブで制御することが必要です。

<ng-template>
  <!-- ここに定義された内容はそのままではレンダリングされない -->
  <p>これは `ng-template` 内の内容です。</p>
</ng-template>

ngTemplateOutletとは

ngTemplateOutletディレクティブとは、ng-templateで準備したテンプレートをレンダリングするために使います。

ng-templateとngTemplateOutletで共通のテンプレート描画をする

以下のように、テンプレートに名前を付けて、ngTemplateOutletでその名前を指定することで、
ng-templateの描画を行えます。

※ngTemplateOutletのインポートをコンポーネント側に記述する必要があります。

<ng-template #errorTemplate>
  <p>エラーが発生しました。</p>
</ng-template>

@if (isError) {
  <p>正常に動作しています。</p>
} @else {
  <ng-container [ngTemplateOutlet]="errorTemplate"></ng-container>
}

このような感じで、ng-templateで設定したテンプレートを呼び出すだけで利用できるため、
同じ描画処理を行うことがあるのであれば、これを使うと冗長性がなくなり、可読性が上がります。

パラメータを渡して異なる部分を作る

テンプレートを呼びだすときに、完全に同じ内容ではなく、少し処理を変えたいということがある場合は、パラメータを指定できます。

<ng-template #myTemplate let-name="name">
  <p>こんにちは、{{ name }}さん！</p>
</ng-template>

<div *ngTemplateOutlet="myTemplate; context: { name: '太郎' }"></div>
<div *ngTemplateOutlet="myTemplate; context: { name: '花子' }"></div>

このように、let-nameとcontextを使うことで、パラメータを設定することで、ng-template側でパラメータの設定を使ってテンプレートを作ることができるので、違いを出すことができます。