Unable to call Angular 6 Service from HTML EventListener

Question

I have an angular ag-grid, from where I have created a cellRenderer and cellRendererParams. And from cellRenderer I am calling a method which creates a button in that every cell of ag-grid.

constructor(private notificationService: NotificationService) { }

ngOnInit() {
    this.columnDefs = [{
            headerName: "Action",
            field: "notificationId",
            width: 180,
            cellRenderer: this.notificationCellRendererFunc,
            cellRendererParams: {
              notificationId: 'notificationId'
            }
          }];
}

And the notificationCellRendererFunc:

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, I am creating eventListener for every button, so that when any of the button hits, it will provide me the selected row's notificationId and I can send it to the API for further processing.

But the problem is, 'this' keyword is not working inside eventListener, even if I assign 'this' to 'self' keyword outside the listener. It says: ERROR TypeError: Cannot read property 'notificationService' of undefined at HTMLButtonElement..

"My moto is to create a button in every row of ag-grid, and after hitting the button it will resend the notification."

score 0 · Answer 1 · answered Mar 20 '19 at 08:53

0

Because you are not using arrow function. What you can do is this:

espan.addEventListener('click', () => {
 // Your code here
});

Check this nice article here:

https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26

answered Mar 20 '19 at 08:53

iamjc015

2,127
6
25
61

Yes, I have tried doing that but still didn't work, I have put a sample video link for the same.. https://www.screencast.com/t/xtZAp4aVZ – Priyank Pahuja Mar 20 '19 at 09:24

MullisS · Answer 2 · 2019-03-20T12:57:14.680

0

you have to bind your object to the function so you have access to your service. For more information look here: How to bind event listener for rendered elements in Angular 2?

Your code should look like something like this:

 eSpan.addEventListener('click', function (eSpan) {
          alert(eSpan.toElement.id);
          var notificationFilter: any = {};
          notificationFilter.notificationId = eSpan.toElement.id;
          this.notificationService.ResendNotification(notificationFilter)
            .subscribe(
              (data: any) => {
                console.log('in save')
              },
              err => { console.log(err) }, // error
          );

        }.bind(this));

edited Mar 20 '19 at 12:57

answered Mar 20 '19 at 08:57

MullisS

238
2
11

I tried binding 'this' to the listener but it goes undefined. Please have a look https://www.screencast.com/t/Ly5BKlL8x – Priyank Pahuja Mar 20 '19 at 11:08
There was an error in my markup. ".bind(this) belongs to the function. Just look at the demo here: https://stackblitz.com/edit/angular-dnnylg – MullisS Mar 20 '19 at 12:56
The .bind(this), didn't worked for me, so I made a slight change in my code and created onCellClicked event, and checking the condition of the click and it's doing my job. But thanks for your help @MullisS. – Priyank Pahuja May 30 '19 at 10:27

Unable to call Angular 6 Service from HTML EventListener

2 Answers2