Binding Button Events in Jquery Datatable in Angul

Question

I am trying to Implement the Jquery Datatable in my Angular 2 Application

I could Render the Table in my html file as follows

<sa-datatable [options]="options" tableClass="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </sa-datatable>

In my component Oninit , I am Initialising my Table as following and adding two Buttons in the Action

ngOnInit() {
    this.options = {
        dom: "Bfrtip",
        ajax: (data, callback, settings) => {
            //My Service Call
        },
        columns: [
            { data: "result.id" },
            { data: "result.name" },
            {
                data: null, render: function (data, type, row) {
                return '<button id="myButton" class="btn btn-primary editbutton" data-toggle="modal" title="1" data-target="#mymodal" (click)="custcatSelected(' + data.result + ')">Edit</button> / <button #myButton1 class="btn btn-danger deletebutton" (click)=deleteCustCat(' + data.result.id + ')>Delete</button>';
                }
            }
        ],
        buttons: [
            'copy', 'excel', 'pdf', 'print', 'colvis'
        ]
    };
}

public custcatSelected(customercat) {
    //Implemetation for Edit , where customercat is an object
}

public deleteCustCat(custcatId: string) {
    //Implementation for Deleting
}

I am not able to Trigger these two events custcatSelected() and deleteCustCat().

I could understand that these events are not compiled by angular ,since its added dynamically . And i do not know how to make these events work

Any Work Around would be helpful Thanks.

Answer 1

One way I can think of is listening the event by jQuery and using the data attribute on the element to handle the event. I haven't tested this code, and apparently it is not a clean solution. Just to give you an idea.

You will need to add declare var $:any at the top of your component as well. Because TypeScript will complaint about that.

ngOnInit() {
    this.options = {
        dom: "Bfrtip",
        ajax: (data, callback, settings) => {
            //My Service Call
        },
        columns: [
            { data: "result.id" },
            { data: "result.name" },
            {
                data: null, render: function (data, type, row) {
                    return `
                        <button id="selectedBtn" class="btn btn-primary editbutton" data-toggle="modal" title="1"
                                data-target="#mymodal"
                                data-elemnt-obj="${data.result}">Edit</button> 

                        <button class="btn btn-danger deletebutton"
                                data-element-id="${data.result.id}">Delete</button>
                    `;
                }
            }
        ],
        buttons: [
            'copy', 'excel', 'pdf', 'print', 'colvis'
        ]
    };

    $(document).on('click', '#selectedBtn', ($event) => {
        let customerCat = JSON.parse($($event).data('elemnt-obj'));
        this.custcatSelected(customerCat);
    });

    $(document).on('click', '.deletebutton', ($event) => {
        let customerId = $($event).data('element-id');
        this.deleteCustCat(customerId);
    });
}

public custcatSelected(customercat) {
    //Implemetation for Edit , where customercat is an object
}

public deleteCustCat(custcatId: string) {
    //Implementation for Deleting
}