Angular2 Infinite Scroll Directive Issue

Question

I am using the below infinite scroll directive:

https://github.com/orizens/angular2-infinite-scroll

But the thing is when I use this directive on one page, and if I move away from that page the scrolled event is still fired, probably because of below line in the scroller.ts file:

return this.container.addEventListener('scroll', this.handler.bind(this));

This event listener is added but not removed when we move away from the page.

Any clue, how to handle it automatically, when we switch to another page?

Günter Zöchbauer · Accepted Answer · 2016-05-29 19:33:40Z

1

Either you add the event handler declaratively

<div class="container" (scroll)="handler($event)"></div>

or you use

ngOnDestroy() {
  this.container.removeEventListener('scroll', this.handler);
}

answered May 29, 2016 at 19:33

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Naveed Ahmed Over a year ago

Thank you so much Günter for your reply. It seems that the ngOnDestroy event isn't being fired, does it work on directives as well? I am using RC1

drew moore Over a year ago

@NaveedAhmed does your class implement OnDestroy?

Naveed Ahmed Over a year ago

Yes, import { Directive, ElementRef, Input, Output, EventEmitter, OnDestroy} from '@angular/core'; export class InfiniteScroll implements OnDestroy { ///other code.... ngOnDestroy() { console.log("ngOnDestroy called"); this.container.removeEventListener('scroll', this.handler); }

Collectives™ on Stack Overflow

Angular2 Infinite Scroll Directive Issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related