Angular 6 Serverside button click

Velocity540

I have been using datatables for years inside a DurandalJS and KncokoutJS project.
We are now converting to use Angular 6.

If I define a table (below), how can I get the button click event to work? Specifically inside Angular, with a reference to the data of the row? In knockoutJs there was a way to "rebind" the HTML AFTER the server call. I cannot get this to work with Angular.

this.dtOptions = {
ajax: (dataTablesParameters: any, callback: any) => {

                this.myService.myEndPoint(dataTablesParameters).
                    subscribe((resp: any) => {
                        this.myDataCollection = resp.aaData;
                        this.ref.detectChanges();
                        callback({
                                recordsTotal: resp.iTotalRecords,
                                recordsFiltered: resp.iTotalDisplayRecords,
                                data:  resp.aaData
                            });
                    });
            },
            select: true,
            order: [2, "asc"],
            columns: [
                    { data: null,  defaultContent: 'details', orderable: false, class: 'details-control'},
                    { data: null, orderable: false, },
                    { data: "partNumber", orderable: true, },
                    { data: "units", orderable: true },
                    {
                        title: "Display Name",
                        data: null,
                        orderable: true,
                        render: (data, type, full) => `<button (click)="testClick(data.id)">ClickMe</button>`
                    }
                ]
  };

allan

I would be surprised if there is a way to make that work using Angular directives such as (click)=.... The HTML generated isn't processed by Angular there, so unless it has some kind of global listener and checks for a (click) attribute (which I seriously doubt!) then it just wouldn't work.

You'd need to either apply a delegated event listener at the top level of the table (or container), or add static event listeners after the table has been drawn.

I'm afraid I don't know enough about Angular to be able to help in that regard though.

Allan

Velocity540

Thanks Allan,
I had assumed that would be your answer.

There has to be a way to do it using Angular directives. I was able to do this in knockoutjs, I would be 100% shocked if you cannot re-bind in Angular.

Obviously I am missing something, so anyone else reading this, if you have an idea please share.

myyalin

@Velocity540

You can use function renderer like this
ngAfterViewInit(): void {
this.renderer.listenGlobal('document', 'click', (event) => {
if (event.target.hasAttribute("delete-data-id")) {
this.delete(event.target.getAttribute("delete-data-id"));
}
});
}

FrankMarin

Just clarifying the answer is here.
@myyalin

The idea of using global event works.
I'm use render: function(data, type, row, meta) ....

<button class="deleteButton" value="' + data + '">Delete</button> : data;

data is the Id of the row...

on the .ts

    var self = this;
    this.element.addEventListener('click', function (e: any) {
      if (e.target.className === 'deleteButton') {
        self.MyFunction(e.target.value);
      }
    });