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);
    }

With this kind of problem, better to have a plunkr. Otherwise, it is very difficult for us to help you. — trungvose
– trungvose, Commented Sep 5, 2017 at 14:36
how to get back my click event i.e <li ><a (click)="deactivateHospital(hospital.id)" ><span class="active-bubble"></span> Inactive </a></li> in angular zone after using external js library. Write now above code is not responding to click event. It would be really hard to put my code on plunkr. I can provide you more details. — Shivam Muttoo
– Shivam Muttoo, Commented Sep 5, 2017 at 15:17
plnkr.co/edit/Np2ooN2M07pyVrQiM0Tv?p=preview hope this will help — Shivam Muttoo
– Shivam Muttoo, Commented Sep 5, 2017 at 17:21
Just checked your plunkr, seem the Footable will initialize their own table and hide the one that you display. I think this situation is similar to jQuery data tables here stackoverflow.com/questions/44364904/… The way we managed to work here is not so clean but not sure if there is another way to do. Basically, you will assign a class to the button and use jQuery event delegation to catch the event. — trungvose
– trungvose, Commented Sep 6, 2017 at 3:11

Fred · Accepted Answer · 2017-12-02 13:28:52Z

0

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; }

edited Dec 2, 2017 at 13:28

answered Nov 30, 2017 at 6:16

Fred

1,2411 gold badge15 silver badges36 bronze badges

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

1 Comment

Fred Over a year ago

Absolutely. I used part of your code for the examlpe.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related