Within my angular ag-grid setup, I've implemented a cellRenderer and cellRendererParams. The cellRenderer calls a method to generate a button in each cell of the ag-grid.
constructor(private notificationService: NotificationService) { }
ngOnInit() {
this.columnDefs = [{
headerName: "Action",
field: "notificationId",
width: 180,
cellRenderer: this.notificationCellRendererFunc,
cellRendererParams: {
notificationId: 'notificationId'
}
}];
}
The notificationCellRendererFunc is as follows:
notificationCellRendererFunc(params) {
var self = this;
var eSpan = document.createElement('button');
console.log(params.value); // logs notificationId
eSpan.innerHTML = 'Resend';
eSpan.id = params.value;
eSpan.addEventListener('click', function (eSpan) {
alert(eSpan.toElement.id);
var notificationFilter: any = {};
notificationFilter.notificationId = eSpan.toElement.id;
self.notificationService.ResendNotification(notificationFilter)
.subscribe(
(data: any) => {
console.log('in save')
},
err => { console.log(err) }, // error
);
});
return eSpan;
}
In the above method, an eventListener is created for each button, allowing the retrieval of the selected row's notificationId to be sent to the API for processing.
However, I encountered an issue with the 'this' keyword not functioning inside the eventListener, even after assigning 'self' to it externally. The error message displayed is: ERROR TypeError: Cannot read property 'notificationService' of undefined at HTMLButtonElement..
My goal is to have a button in every row of the ag-grid, triggering the notification resend function upon clicking.