add click event to ngx-datatable cell body

Question

I want to call a function in click event of ngx-datatable cell body. This is the code I have right now.

<ngx-datatable-column name="User Name" prop="userName">
    <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
       <span *ngIf="!editable" (click)="editable = true;"> Some Text </span>
       <input type="text" *ngIf="editable"/>
    </ng-template>
</ngx-datatable-column>

I want to move the stuff in span click event into cell body click event. I got few problems when I trying to move,

1. ng-template (click) event not working,
2. then I tried to add a div inside the ng-template but it only cover the span area. Witch means the div not covering whole cell body. (Am not allowed to change the default styles of the cell)

Answer 1

Can you Please try with this

<ngx-datatable-column name="User Name" prop="userName">
    <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
       <span *ngIf="!editable" (dblclick)="editable = true;"> Some Text </span>
       <input type="text" autofocus *ngIf="editable"/>
    </ng-template>
</ngx-datatable-column>