CODEWITHSUNDEEP
htmlangular
A. Gladkiy
A. Gladkiy

Reputation: 3450

how to insert html with angular bindings dynamically

I'm developing Angular 8 app and I want to insert HTML with angular bindings into my page.

So, my html code is:

<button (click)="insertHtml()">Insert</button>
<div id="text"></div>

My angular code is:

insertHtml() {
    document.getElementById("text").innerHTML = '<span (click)="handleClick(' + this.item.id + ')" [hidden]="' + this.item.hidden + '">'
}

Html looks fine, but it doesn't show right css class and click handler.

Can I insert html with angular bindings dynamically? And if yes, what am I doing wrong?

Upvotes: 0

Views: 272

Answers (1)

Doflamingo19
Doflamingo19

Reputation: 1629

you can use another approch (something like this):

<button (click)="showHtml()">Insert</button>
<ng-container *ngIf="clicked">
 <div id="text"><span (click)="......" [hidden]="' + ...... + '">'</div>
</ng-container>

and in you .ts you do:

 @Input()
clicked:boolean =false;

showHtml(){
 this.clicked=true;
}

it must work.

Upvotes: 1

Related Questions