How to add a action button in a datatable of an angular component to call typescript function?

anwermarstech

Link to test case:

$("#example1")
  .DataTable({
    responsive: true,
    lengthChange: true,
    autoWidth: false,
    buttons: ["copy", "csv", "excel", "pdf", "print", "colvis"],
    data: this.voucherDTO,
    columns: [
      { data: "voucherno" },
      { data: "accountof" },
      { data: "accountHead.accountHead.name" },
      { data: "amount" },
      { data: "narration" },
      { data: "vdate" },
      {
        data: null,
        defaultContent:
          '<button type="button" class="btn btn-primary btn-block" ><i class="fa fa-edit"></i></button>',
        createdCell: this.doSomething(),
      },
    ],
  })
  .buttons()
  .container()
  .appendTo("#example1_wrapper .col-md-6:eq(0)");

Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I tried above code and then the undermentioned code:

createdCell: function(cell: any, cellData: any, rowData: any, rowIndex: any, colIndex: any) {
            // Add click event to action button
            $(cell).find('button').click(function() {
              // Call component function on button click
              this.doSomething(rowData);
            });
          }

but both now working properly

I need to call editVoucher function present in component through the datatable button on each row.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Is this information for others? It looks like you've got the issue resolved?

Allan