Angular (click) is not calling function in loop

I am trying to crate a table with a cell edit functionally. I have an array of cell data. i am iterating the array and crating a button with bootstrap pencil icon. please check below template

  <table datatable [dtOptions]="dtOptions" class="awidth row-border hover 
     display table table-bordered striped">
     <thead>
        <tr>
          <th *ngFor="let key of mycolumns" class="icon-margin" style="padding: 8px;">{{key.displayName}}</th>
        </tr>
    </thead>
    <tbody>
  <tr *ngFor="let gefield of gefields" class=" tab-font-size font-weight ">
    
    <td  *ngFor="let k of mycolumns"  class="tab-font-size font-weight" >
        <span  (focusout) ="saveDetails($event, gefield, k)">{{gefield[k.data]}}</span>
        <button *ngIf='k.edit == true' class='glyphicon glyphicon-pencil pull-right white' (click)="makeCellEdit($event)"></button>
       </div>
    </td>
  </tr>
  <tr *ngIf="gefields?.length == 0">
    <td colspan="3" class="no-data-available">No data!</td>
  </tr>
</tbody>

my function on ts file is

CellEdit(e) {console.log("cell edit")}

import { Component, OnInit, Input } from '@angular/core'; import { Http, Headers, RequestOptions } from '@angular/http'; import { HttpClient, HttpResponse } from '@angular/common/http';

class DataTablesResponse { data: any[]; draw: number; recordsFiltered: number; recordsTotal: number; columnName: {}; }

@Component({   selector: 'app-dynamic-datatable',   templateUrl: './dynamic-datatable.component.html',   styleUrls: ['./dynamic-datatable.component.css'] }) export class DynamicDatatableComponent implements OnInit {


 mycolumns =[
    { data: "check", displayName: "check", hyperlink: false, edit: true},
    { data: 'processID',displayName: "Process Id", hyperlink: false, edit: true }, 
    { data: 'processName', displayName: "Process Name", hyperlink: true, edit: true },
    { data: 'processDescription',displayName: "Process Description", hyperlink: true, edit: true}   ];

 gefields = [
    {
        "processID": 1,
        "versionPublishedOnDateTime": null,
        "processLastModifiedOnDateTime": null,
        "processVersion": "",
        "processDescription": "My Process",
        "processLastModifiedByUserID": null,
        "functionID": 1,
        "processName": "My Process"
    },
    {
        "processID": 2,
        "versionPublishedOnDateTime": null,
        "processLastModifiedOnDateTime": null,
        "processVersion": "",
        "processDescription": "My Process 2",
        "processLastModifiedByUserID": null,
        "functionID": 2,
        "processName": "My Process 2"
    },
    {
        "processID": 3,
        "versionPublishedOnDateTime": null,
        "processLastModifiedOnDateTime": null,
        "processVersion": "",
        "processDescription": "map process",
        "processLastModifiedByUserID": null,
        "functionID": 3,
        "processName": "map process"
    },
    {
        "processID": 4,
        "versionPublishedOnDateTime": null,
        "processLastModifiedOnDateTime": null,
        "processVersion": "",
        "processDescription": "dd Process",
        "processLastModifiedByUserID": null,
        "functionID": 3,
        "processName": "dd Process"
    } ];   dtOptions: DataTables.Settings = {};   showPopUp = false;

  constructor(private http: HttpClient) {
       }   ngOnInit(): void {
    console.log("_____________ngOnInit End____________");
    const that = this;

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 4,
     
      columns: this.mycolumns,
    };   
  }

  makeCellEdit(e) {
    console.log("______makeCellEdit()_____");   
  } 
}

I am using this table as a child component. But when I clicked on button, my function is not called.

Please help me.

Ok, I got your concern, the actual problem is your grid. if you are playing with Jquery then you have to stick with that. it is not a good idea to use both jquery and angular togther.

angular is very mature it self. any ways if you want to call a function from a grid you have to deal with jquery function on click

 $("#yourselector").click(function(){
    makeCellEdit();
});

hope this will help.