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.

Continue reading...