(click)='' event is not working , in angular 2

Question

I explored a lot but solution is not working for me. I am trying to call a method in my code but it is not working. There is no Error occurring but click event is not working also. In my code, I am adding a button dynamically and it is added in my code. But when I am clicking on Approved or UnApproved then nothing is happening. I am using <ng-table> , Approved and UnApproved button are in <ng-table> directive. Please suggest me where I am doing wrong?

My code is:

     editData() {
    this.data.forEach(function (row) {
          if (row.isApproved) {
        row.editButton = "<button (click)='approveUnApproveLeave()'>UnApproved</button>";
      } else {
        row.editButton = "<button (click)='approveUnApproveLeave()'>Approved</button>";
        row.isApproved = row.isApproved.toString();
      }
    })
  }

  approveUnApproveLeave() {
    console.log("approveUnApproveLeave called");
  }

} // class closed

please see the snapshot for better understanding.

Answer 1

If you are using innterHTML to display dynamic HTML then...

When you are adding html dynamically using innerHTML it will work fine and give you desire output in UI front. But with same approach, If dynamic HTML contains any angular context in it eg. (click) event, angular context will not work because innerHTML is not meant for it.

So when dynamic HTML contains angular context in it, you must think of using DynamicComponentLoader which injects component along with HTML dynamically where you can use angular context eg. click event

DEMO