Angular datatables, can't click on row buttons when row click event is configured

Question

I am using the angular datatables module in my project and i configured a function using the rowrollback function to perform actions when clicked on the row. but when using that i can't click on buttons in my row, like actions designed for each row (e.g delete modify client ).

I tried not to add the Actions column in my dtconfig object but it made my datatable not get triggered.

here is my code :

dtOptions :

dtOptions = {
            pagingType: 'full_numbers',
            pageLength: 10,
            columns: [{
                title: 'Current Owner',
                data: 'CurrentOwner'
            },{
                title: 'Doc Hash',
                data: 'hash'
            },{
                title: 'Doc Name',
                data: 'name'
            },{
                title: 'Doc Owner',
                data: 'DocumentOwner'
            },{
                title: 'Time Stamp',
                data: 'Timestamp'
            },{
                title: 'Actions',
                data: 'actions'
            }],
            rowCallback: (row: Node, data: Object |any[] , index: number) => {

                try{
                    const self = this;
                    // Unbind first in order to avoid any duplicate handler
                    // (see https://github.com/l-lin/angular-datatables/issues/87)
                    $('td', row).unbind('click');
                    $('td', row).bind('click', () => {
                        let X ={};
                        Object.assign(X,data);
                        console.log(X)
                        console.log(this.Certificates[index]);
                        self.DetailedCertificate=this.Certificates[index];
                        $(this.detailRef.nativeElement);
                        $(this.detailRef.nativeElement).modal("show");
                    });
                    return row;
                }
                catch (e){
                    console.error("error"+e);
                }
            }

HTML Table :

<tr *ngFor="let row of dataRows" class=".row" >
                  <td style="text-overflow: ellipsis; overflow-wrap: break-word">{{row.CO}}</td>
                  <td>{{row.KC}}</td>
                  <td>{{row.DocName}}</td>
                  <td>{{row.DocOwner}}</td>
                  <td>{{row.TimeStamp}}</td>
                  <td class="text-right">
                    <button   class="btn btn-lg btn-simple btn-info btn-icon" (click)="CO(row.KC,row.DocOwner)"><i class="material-icons">person_pin_circle</i></button>
                    <button  class="btn btn-lg btn-simple btn-danger btn-icon" (click)="RC(row.KC,row.DocOwner)"><i class="material-icons">close</i></button>
                  </td>
                </tr>

Answer 1

Here is an example of a table in angular that accomplishes what you want.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  dataRows: any[] = [
    { kc: 'kc1', docName: 'Document 1', docOwner: 'Johnny', timeStamp: 'last week'},
    { kc: 'kc2', docName: 'Document 2', docOwner: 'Jacob', timeStamp: 'yesterday'},
    { kc: 'kc3', docName: 'Document 3', docOwner: 'Jingleheimer', timeStamp: 'today'},
    { kc: 'kc4', docName: 'Document 4', docOwner: 'Schmidt', timeStamp: 'tomorrow'}
  ];

  buttonInRowClick(event: any): void {
    event.stopPropagation();
    console.log('Button in the row clicked.');
  }

  wholeRowClick(): void {
    console.log('Whole row clicked.');
  }
}

<table>
  <tr>
    <th>KC</th>
    <th>Doc Name</th>
    <th>Doc Owner</th>
    <th>Time Stamp</th>
    <th>Button</th>
  </tr>
  <tr *ngFor="let row of dataRows" (click)="wholeRowClick()">
    <td>{{row.kc}}</td>
    <td>{{row.docName}}</td>
    <td>{{row.docOwner}}</td>
    <td>{{row.timeStamp}}</td>
    <td><button (click)="buttonInRowClick($event)">do thing</button></td>
  </tr>
</table>

This line adds the function call to every row that ngFor generates.

<tr *ngFor="let row of dataRows" (click)="myFunction()">...</tr>

The key to making sure the click events on buttons within the rows don't interfere with the overall row click is to add event.stopPropagation();

in the functions that the nested buttons call.