how to insert html with angular bindings dynamically

Question

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?

You can check stackoverflow.com/questions/43682801/… or stackoverflow.com/questions/48913344/… — Caro
– Caro, Commented Nov 19, 2019 at 15:41
@Doflamingo19 yes, it works, but unfortunately I need to insert my html into table row and here it didn't help me. — A. Gladkiy
– A. Gladkiy, Commented Nov 20, 2019 at 13:58

Doflamingo19 · Accepted Answer · 2019-11-19 16:01:49Z

1

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.

answered Nov 19, 2019 at 16:01

Doflamingo19

1,6395 gold badges17 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

how to insert html with angular bindings dynamically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related