Add ng-template Dynamically

Question

I want to add below content dynamically in HTML.

<ng-template #elseblock *ngIf="var">
    <h1>
        {{heading}}
    </h1>
</ng-template>

I am using below approch for this.

In app.component.ts file :

htmldata: any = `<ng-template #elseComponent *ngIf="var">
<h1>
  {{ heading }}
</h1>

`;

and in app.component.html

 <div [innerHTML]="htmldata"> </div>

but this approch only render h1 tag in the DOM.(no ng-template)

Please help me to add ng-template dynamically so that #else block, *ngIf will also work.

ngTemplateOutlet is good approach

Praveen Soni
– Praveen Soni

2018-04-05 04:37:14 +00:00
Commented Apr 5, 2018 at 4:37 — Praveen Soni
– Praveen Soni, Commented Apr 5, 2018 at 4:37

Praveen Soni · Accepted Answer · 2018-04-05 04:47:19Z

1

As Per My Understanding from your question, you want to do content projection.

you should use template outlet for this type of usecase.

<ng-template #heading let-heading>
  <h1>
    {{heading}}
  </h1>
</ng-template>


<ng-container *ngTemplateOutlet="heading; context: ContextObj">
</ng-container>

official Angular doc ngTemplateOutlet
or a great blog post on ngTemplateOutlet

answered Apr 5, 2018 at 4:47

Praveen Soni

7908 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add ng-template Dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related