how do you call the angular click event using the datatable?

Question

I am having call this function to edit my record but the function is not called using the (click) angle.

HTLM::

    <sa-datatable [options]="options" paginationLength="true" tableClass="table table-striped table-bordered table-hover" width="100%">
                    <thead>
                           <tr>
                              <th>ID</th>
                              <th>Nome</th>
                              <th>Data de Criação</th>
                              <th>Ações</th>
                           </tr>
                      </thead>
           </sa-datatable>






   token = localStorage.getItem('token');
   public REST_ROOT = `${environment.api_url}/forma`;
   options = {
   dom: "Bfrtip",
   ajax: (data, callback, settings) => {
   this.http.get(this.REST_ROOT, { headers: {'Authorization':"Bearer" + this.token}})
    .pipe(
      map((data: any)=>(data.data || data)),
      catchError(this.handleError),
    )
    .subscribe((data) => {
      callback({
        aaData: data.slice(0, 100)
      })
    })
 },
  columns: [
  {data: 'id'}, 
  {data: 'nome'}, 
  {data: 'created_at'} ,
  {data: null, render: function (data, type, row) {
    return "<button class='btn btn-primary' (click)=\'updatePagamento(data.id)\'>Editar</button>";
  }}
],
responsive:true
}



   updatePagamento(pagamento: FormaPagamento){
     console.log('Chegou');
     this.display2 = true;
     this.configuracaoService.getPagamentoKey(+pagamento.id).subscribe( data  => {
     this.formularioEditPagamento.patchValue(data);
    });
  }

Answer 1

Try this way using the datatable api itself:

Button off

token = localStorage.getItem('token');
   public REST_ROOT = `${environment.api_url}/forma`;
options = {
    dom: "Bfrtip",
    ajax: (data, callback, settings) => {
        this.http.get(this.REST_ROOT, { headers: { 'Authorization': "Bearer" + this.token } })
            .pipe(
                map((data: any) => (data.data || data)),
                catchError(this.handleError),
            )
            .subscribe((data) => {
                callback({
                    aaData: data.slice(0, 100)
                })
            })
    },
    columns: [
        { data: 'id' },
        { data: 'nome' },
        { data: 'created_at' }
    ],
    buttons: [
        {
            text: 'Editar',
            action: function (e, dt, node, config) {
                updatePagamento(dt.id);
            }
        }
    ],
    responsive: true
}



updatePagamento(pagamento: FormaPagamento){
    console.log('Chegou');
    this.display2 = true;
    this.configuracaoService.getPagamentoKey(+pagamento.id).subscribe(data => {
        this.formularioEditPagamento.patchValue(data);
    });
}

Button inside:

token = localStorage.getItem('token');
   public REST_ROOT = `${environment.api_url}/forma`;
options = {
    dom: "Bfrtip",
    ajax: (data, callback, settings) => {
        this.http.get(this.REST_ROOT, { headers: { 'Authorization': "Bearer" + this.token } })
            .pipe(
                map((data: any) => (data.data || data)),
                catchError(this.handleError),
            )
            .subscribe((data) => {
                callback({
                    aaData: data.slice(0, 100)
                })
            })
    },
    columns: [
        { data: 'id' },
        { data: 'nome' },
        { data: 'created_at' }
    ],
    columnDefs: [ {
            "targets": -1,
            "data": null,
            "defaultContent": "<button class='btn btn-primary'>Editar</button>"
        } ],
    responsive: true
}


$('tbody').on( 'click', 'button', function () {
  var data = table.row( $(this).parents('tr') ).data();
  updatePagamento(pagamento: FormaPagamento){
     console.log('Chegou');
     this.display2 = true;
     this.configuracaoService.getPagamentoKey(+pagamento.id).subscribe(data => {
         this.formularioEditPagamento.patchValue(data);
     });
   }
}