CODEWITHSUNDEEP
angularangular2-template
Jordan
Jordan

Reputation: 764

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?

Upvotes: 1

Views: 950

Answers (1)

Antoniossss
Antoniossss

Reputation: 32535

Either switch to use standalone components or if you need to use template, you can do it with 

<ng-container *ngTemplateOutlet="MyTpl"></ng-container>

This places MyTpl template in place of ng-container

Upvotes: 0

Related Questions