angular click() event not working after rendering dynamic html

Question

Few html elements loaded from server side and angular click() event also part of it. but event is not firing after rendering the elements. I understand that i need to notify the DOM. I can not do this.

component.ts

mport { Component} from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: '../Views/Dashboard.html',
    providers: []
})

export class DashboardComponent {
    public deviceData="<div (click)="Go()">Click</div>"; //e.x: loaded from server
    constructor(){

    }
    Go():void{
       alert("Go");
    }

}

html

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

Where did you read that it should work?

yurzui
– yurzui

2018-03-06 09:58:38 +00:00
Commented Mar 6, 2018 at 9:58 — yurzui
– yurzui, Commented Mar 6, 2018 at 9:58
blog.angularindepth.com/…

sebu
– sebu

2018-03-06 09:59:10 +00:00
Commented Mar 6, 2018 at 9:59 — sebu
– sebu, Commented Mar 6, 2018 at 9:59
@AngularInDepth.com could not write such a thing

yurzui
– yurzui

2018-03-06 10:00:47 +00:00
Commented Mar 6, 2018 at 10:00 — yurzui
– yurzui, Commented Mar 6, 2018 at 10:00
ok, do you have any solution for it, i need help.

sebu
– sebu

2018-03-06 10:02:23 +00:00
Commented Mar 6, 2018 at 10:02 — sebu
– sebu, Commented Mar 6, 2018 at 10:02
stackoverflow.com/…

yurzui
– yurzui

2018-03-06 10:05:00 +00:00
Commented Mar 6, 2018 at 10:05 — yurzui
– yurzui, Commented Mar 6, 2018 at 10:05

Manish Vadher · Accepted Answer · 2018-03-06 10:38:53Z

3

You can bind event using

<div class="classname" [innerHTML]="deviceData"></div>

this.deviceData = "<a herf='javascript:void(0);'>Click</a>";

ngOnInit()
{
 var obj=this;
    $(document).on('click', '.classname', function () {
        obj.Go();
    });
}

Go() 
{
    alert("Go");
}

answered Mar 6, 2018 at 10:38

Manish Vadher

1,55415 silver badges14 bronze badges

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

3 Comments

sebu Over a year ago

I appreciate your answer @Manish, but jquery with angular bit overwhelming work. Thanks, let me try with your given code snippets.

Manish Vadher Over a year ago

thanx ..for using jquery you have to write "declare var $: any;" this line to typing.d.ts

Zain Ul Abidin Over a year ago

this should be the accepted answer, it solved the problem

Andrew Howard · Accepted Answer · 2018-03-06 10:16:43Z

0

A click function (or any Angular specific tag) to be rendered as html is not best practice. Try to only render bare basic html and put the click function in separately.

answered Mar 6, 2018 at 10:16

Andrew Howard

3,0937 gold badges41 silver badges72 bronze badges

Collectives™ on Stack Overflow

angular click() event not working after rendering dynamic html

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related