Angular 6 Serverside button click

Angular 6 Serverside button click

Velocity540Velocity540 Posts: 2Questions: 1Answers: 0

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>`
                    }
                ]
  };

Answers

  • allanallan Posts: 48,278Questions: 1Answers: 6,967 Site admin

    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

  • Velocity540Velocity540 Posts: 2Questions: 1Answers: 0

    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.

Sign In or Register to comment.