[Angular] (Tips)テンプレート内でng-templateを使い回す

<!-- ......略 -->
<!--コンポーネント側で変数 "hoge"があるとする -->
<ng-container *ngIf="hoge; else elseTemplate">
  hoge is true  :)
</ng-container>

<ng-template #elseTemplate>
hoge is false !
</ng-template>

<!-- ......略 -->
<!-- 同じテンプレートファイル内で単純にhtmlを使いまわしたい場合 -->

<ng-template #kurikaesi>
<dl>
  <dt>name</dt>
  <dd>hoge</dd>
</dl>
<ng-template>

<!-- これでつかいまわせる -->
<ng-container *ngTemplateOutlet="kurikaesi"></ng-container>
<ng-container *ngTemplateOutlet="kurikaesi"></ng-container>
<ng-container *ngTemplateOutlet="kurikaesi"></ng-container>

<!-- ......略 -->
<!-- 同じテンプレートファイル内でhtmlを使いまわしたい場合でng-template内で変数を使いたいとき -->
<!--
コンポネント側で hoge = { name:string , age:number} が定義されている場合
-->

<ng-template #kurikaesi let-hoge>
<dl>
  <dt>{{hoge.name}}</dt>
  <dd>{{hoge.age}}</dd>
</dl>
<ng-template>

<!-- これでつかいまわせる -->
<ng-container *ngTemplateOutlet="kurikaesi; context:{$implicit:hoge}"></ng-container>

/**
*  @ContentChildでTemplateを渡せるようにしておく
*/

@Component({
  selector: 'hoge',
  templateUrl: '....', // 略
  styleUrls: ['....'],// 略
})

export class SsPopoverComponent{
  @ContentChild(TemplateRef) bodyTemplate: TemplateRef<any>;
}

<!-- ......略 -->
<ng-container *ngTemplateOutlet="bodyTemplate"></ng-container>
<!-- ......略 -->

<!-- 親のコンポーネントからhogeコンポーネントへテンプレートを渡す -->
<!-- もちろん、親コンポネント内で`.hoge-content`へスタイルを当てられる -->
<hoge>
  <ng-template>
  <span class="hoge-content">
    hogehoge
  </span>
  </template>
</hoge>

<!-- 親からテンプレートを渡されるかどうかで表示を切り分ける場合 -->

<!-- ......略 -->
<ng-template #defaultTemplate>
  is Empty!
</ng-template>

<ng-container *ngTemplateOutlet="bodyTemplate? bodyTemplate : defaultTemplate"></ng-container>
<!-- ......略 -->