In an Angular component, how to programmatically append a template to various locations?

In my component A, I have a small reusable template #MyTpl that I would like to dynamically/programmatically add in various locations of the component A's template. ngIf could do the trick but I have a corner case with an ngSwitch:

<div class="compA" [ngSwitch]="mode">
<div *ngSwitchCase="mode-1">
<span>rofl</span>

</div>
<div *ngSwitchCase="mode-2">
<span>kikoo</span>
</div>
...
<div *ngSwitchCase="mode-n">
<span>kikoo</span>
</div>
</div>

<ng-template #MyTpl>
<button (click)="onClickLol()">lol</button>
</ng-template>


Is there a way to append #MyTpl (conditionally) to the content of the currently cased mode?

Continue reading...