Access / Call component context from event handler


#1

I have added handler for scroll event.

const ele = this._scrollContent.nativeElement;
ele.addEventListener(‘scroll’, this.handler);

In this handler method I am able to get scroll event but not able to access component variable with this. I want to access variables and methods of component but that context not available with this.

e.g. I want to call loadData from handler

handler(event) {}

loadData{
}


#2

Are you trying to get the scroll event on ion-content? If so I’d recommend using the (ionScroll) event.

e.g.

<ion-content (ionScroll)="handler($event)">


#3

I am trying to create horizontal infinite scroll. I get the condition when it reaches to end with following code. But this refers to that element not to component. I want to call loadData method from component to load new items

handler(event) {
if((event.target.scrollLeft + event.target.clientWidth) == event.target.scrollWidth) {
// horizontal scroll at end load new items
}
}


#4

Change how you’re adding the handler to:
ele.addEventListener(‘scroll’, e => this.handler(e));


#5

Great. That works.
Thank you for your help