Losing click event in angular 2 while using external javascript lib footable

Question

While using external library footable(for a responsive table) with angular 2, I am losing all event bindings i.e (click). Tried ngZone, ChangeDetectorRef,ApplicationRef. but no result not able to bind back my all lost angular events.

Below I have written down my code snippet where after calling an API I get a list and using *ngfor i populate my table.

But after Footable.init() am losing binding of method deactivateHospital(). And when I try using click event, deactivateHospital() doesn't work. If I comment footable then my code works fine. Any idea how to bind back my deactivateHospital() back? I know the external javascript library is causing some issue. Do we have any solution for this?

Adding plnkr: http://plnkr.co/edit/Np2ooN2M07pyVrQiM0Tv?p=preview

<tr data-expanded="true" *ngFor="let hospital of hospitalList">
      <td class="hospital-name">{{hospital.name}}</td>
      <td ><span class="ha-name">{{hospital.admin}}</span><br><span class="ha-id">{{hospital.emailId}}</span>
      </td>
      <td>{{hospital.hsa_count}}</td>
      <td>{{hospital.pcm_count}}</td>
      <td>{{hospital.pcv_count}}</td>
      <td>{{hospital.surgeons_count}}</td>
      <td>{{hospital.prefcards_count}}</td>
      <td class="active-status"><span class="active-bubble" ></span> 
Active
        <span class="dropdown">
          <span class="dropdown-toggle mr-l-10" type="button" data-
toggle="dropdown">
          <span class="glyphicon glyphicon-chevron-down"></span></span>
          <ul class="dropdown-menu">
            <li ><a (click)="deactivateHospital(hospital.id)" ><span 
class="active-bubble"></span> Inactive </a></li>
          </ul>
        </span>
      </td>
    </tr>

//angular code

this.hospitalList = data["hospitals"];
        console.log(this.hospitalList);
        setTimeout(()=>{
        FooTable.init($('.table'),{},()=>{
         console.log('hi..');
        });
     },0);

    deactivateHospital(id){
    console.log('id',id);
    }

Answer 1

I have had the same problem in Angular 4 and 5 with the FooTable. But when I changed the a tag to a button it started working again. I then styled the button to look like a a tag.

<ul class="dropdown-menu"><li ><button class="footablebutton" (click)="deactivateHospital(hospital.id)" ><span class="active-bubble"></span> Inactive </button></li></ul>

CSS

.footablebutton {
background:none!important;
color:#337ab7;
border:none; 
padding:0!important;
font: inherit;
cursor: pointer; }

.footablebutton :hover {
color:#23527c; }