Datatable with Angular, Adding buttons to rows with angular click event

Question

I am using datatable at my Angular application. I have lots of data and using server-side processing. When I add rows to table, I need to add a button to last row which has click event. Here is my html :

<div class="card m-t p-3">
    <div class="card-body">
        <table id="datatables"  class="table responsive table-bordered table-striped table-hover" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Quote</th>
                    <th>Author</th>
                    <th>Genre</th>
                    <th>Update</th>
                  </tr>
            </thead>
            
        </table>
    </div>
</div>

Here is my component.ts code (part of it )

 ngOnInit(): void {

this.key = this.keyManager.getKey();

if(this.key == ""){
  alertify.alert("LOGIN REQUIRED","Please go back to the login screen.",()=>{
    this.router.navigateByUrl("/login");
  })
}else{
  this.getAllQuotes();
}

this.dtOptions = {
  dom: 'B <"top"i>rt<"bottom"flp><"clear">',
  paging : true,
  responsive :true,
  processing: true,
  serverSide: true,
  ajax: {
    "url": this.baseUrl+"/api/Quote/paging?apiKey="+this.key,
    "type": "POST",
    "dataType": "json"
  },
  "columnDefs": [{
    "targets": [0],
    "visible": false,
    "searchable" : false
  }],
  "columns": [
    { "data": "id" },
    { "data": "text"},
    { "data": "author"},
    { "data": "genre"},
    {
      "data":null, "render":function(data,row){
        return `<button (click) = updateClicked2() class="btn btn-warning deleteBtn">Update</button>`;
      }
    }
    
  ]
};

And simple updateClicked2() method :

updateClicked2(){
console.log("clicked");

}

Here is the result on chrome:

It is not working. It should not be like that because one of my working buttons looks like:

So, I have to use my method from component.ts script because that update button will use router and change my app's route to another page. Please help me. Thank you.

Answer 1

I solved the problem like this (not adding buttons but make row clickable)

this.dtOptions = {
  rowCallback: (row:Node, data:Quote[] | object, index:number)=>{
  row.childNodes[0].textContent = String(index + 1);      
  const self = this;
  $('td' ,row).off('click');
  $('td',row).on('click',()=>{
    this.updateClicked(data as Quote);
  });
  return row;
  }
}