Angular > テンプレート内で、テンプレートを参照する。(ng-containerでng-templateを参照)

わざわざ新しいコンポーネントを定義するほどではないけど、同じテンプレートの中で一定の記述を使い回したい時があります。
うまく記事が見つけられなかったので一応メモ。

こちらが参考になります

<!-- 使いまわしたい記述を ng-template で宣言 -->
<ng-template #template let-text="text">
 <p> {{ text }} </p>
</ng-template>

<!-- テンプレートを ng-container から利用する -->
<ng-container *ngTemplateOutlet="template; context:{ text: 'hoge' }"></ng-container>
<ng-container *ngTemplateOutlet="template; context:{ text: 'huga' }"></ng-container>

こちらを実行すると以下のDOMが生成されます。

<p> hoge </p>
<p> huga </p>

ng-contenerでは *ngTemplateOutlet によって、テンプレートと、context を指定します。
context はテンプレートで使用する変数になります。

ng-templateは context から受け取る変数を let-{context内のプロパティ}={変数名} で宣言し、
内部で利用できます。