I am trying to tap into the click event for when one of the paging buttons on the Datatable is clicked, but not sure how I will achieve this in Angular.
I if I look at this example, how will I possibly write the same code in Angular, and within the click event, emit an event through an @Output property, so that my parent component can be notified that an paging event fired?
If you want to handle the click event in the in the component where you initialized the datatable, there is no need to emit the event. Simply use the code in the example you provided in the component and your event will work just fine.
Here i have created an angular version of the example you provided. Click on next on the datatable paginator and you will see the event firing.
However if you want to handle the event in the parent component of the component where you initialized the datatable, you need emit and event through @Output and handle it in child component. Or you can use any other component interaction technique that may suite your logic.
Hope this helps
After trying the above solutioin provided, it did not exactly work for me.
I had to change the implementation provided, as follow:
drawCallback: () => {
$(document).on('click', '#datatables_next', () => {
this.nextClicked.emit("continuation");
});
$(document).on('click', '#datatables_previous', () => {
console.log('next clicked...');
});
}
The problem is, with the provided solution, my events were never fired. This is due to the fact that the pagination controls are loaded dynamically I think, and at time of me trying to bind to those controls, they were not there.