click and change events are not working for Angular 6 Datatables Responsive extension - datatables

Question

I use Angular 6 datatables for show data in the frontend. I used responsive extension to show more data as described in
https://l-lin.github.io/angular-datatables/#/extensions/responsive
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
<thead>
<tr>
<th>Category Name</th>
<th>Description</th>
<th>Is Enable</th>
<th>Sub Categories</th>
<th>update</th>
<th>delete</th>
<th>Extra Data</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of vehicleCategoryData; let i = index">
<td>{{data.categoryName}}</td>
<td>{{data.description}}</td>
<td>{{data.isEnable}}</td>
<td>{{data.subCategory.length}}</td>
<td><i class="fa fa-edit" (click)="update(i)"></i></td>
<td><i class="fa fa-trash-o" (click)="delete(i)"></i></td>
<td>{{data.extraData}}
</tbody>
</table>
also my dtOptions are defined as follows.
dtOptions: any = {
pagingType: 'full_numbers',
pageLength: 5,
columns: [{
title: 'Category Name',
data: 'categoryName'
}, {
title: 'Description',
data: 'description'
}, {
title: 'Is Enable',
data: 'isEnable'
},{
title: 'Sub Categories',
data: 'sub'
},
{
title: 'update',
data: 'up'
},
{
title: 'delete',
data: 'del'
},
{
title : 'Extra Data',
data : 'sc',
className : 'none'
}],
responsive: true
};
So everything works fine. but
(click)="update(i)"
(click)="delete(i)"
events are not working. How can i solve this problem. Any suggestions?

Answer 1

I solve this problem by using the listHiddenNodes function.
First i imported the Responsive variable in the component
import Responsive from 'datatables.net-responsive';
then i put this code on the dtOptions
this.dtOptions = {
responsive: {
details: {
renderer: Responsive.renderer.listHiddenNodes()
}
},
};
That's all!