Append html to div javascript and bind typescript function to a (click) event not working

Question

I have an external javascript file and I have a function that appends HTML to siteLayoutComponent.html DIV as below code:

function LoadNotificationData(data) {
        $("#lstNotification").append(' <li id="' + data.id + '"><a (click)="logout()"><i class="fa fa-sign-out fa-fw" "></i>' + data.subject + '</a></li> <li id="dv' + data.id + '" class="divider"></li>')     
}

logout function that in a siteLayoutComponent.ts

logout() {    
this.router.navigate(['/login']);
}

after inspecting the generated code, we could realize that the event wasn't rendered in a correct way, I need to perform this binding dynamically in the appended HTML. any Ideas

possible duplicate of https://stackoverflow.com/questions/35296704/angular2-how-to-call-component-function-from-outside-the-app — Aniruddha Gohad, Feb 15 '18 at 11:46
"after inspecting the generated code, we could realize that the event wasn't rendered in a correct way". How was it rendered and why was this wrong? — Stanislas, Feb 15 '18 at 20:00
Side note: personally I avoid mixing HTML with Javascript. If I had to write this in jQuery, I would use something like `$li.append($("").click(logout));` — Stanislas, Feb 15 '18 at 20:08

score 0 · Accepted Answer · answered Mar 09 '18 at 23:20

I would prefer to use angular2 directives instead of jquery append because that is the proper way to work in angular2 like:

// maybe json list or lists this.data = [{id:1212,subject:"login"},{id:1212,subject:"logout"}];

you can push pop your data from this variable and on behalf of this data variable, you can create your list like given in screenshot attached.

Thanks

Append html to div javascript and bind typescript function to a (click) event not working

1 Answers1