CODEWITHSUNDEEP
angularangular2-directives
CruelEngine
CruelEngine

Reputation: 2841

Hostlistener wait

Is there anyway to listen to custom events in angular 2 in intervals ? like once in 3 seconds ?

export class scrollDirectiveComponent {
    pageNo: any = 1;
    @Input() pageNumber: any;
    @Output() emitPageNumber: EventEmitter<any> = new EventEmitter();
    @HostListener('scroll', ['$event'])
    onScroll(event) {
        console.log('scrolled', event.target.scrollTop);
        let tracker = event.target;
        let limit = tracker.scrollHeight - tracker.clientHeight - 5;
        console.log(event.target.scrollTop, limit);
        if (event.target.scrollTop > limit) {
            this.pageNumber++;
            this.emitPageNumber.emit(this.pageNumber);
        }
    }
}

It keeps on listening to scroll event and the page number is automatically incremented . If one cannot wait then is there anyway in which the scroll bar can be changed to a new position?

Upvotes: 1

Views: 1269

Answers (1)

Vova Bilyachat
Vova Bilyachat

Reputation: 19504

As soon as i understood then you can do like this, on each scroll event you emit to observable and on observable throttleTime(3000) it means that only one event will go through.

export class scrollDirectiveComponent {
  pageNumber: any = 1;
  private scrollEvents = new Subject();
  constructor() {
    scrollEvents
      .throttleTime(3000)
      .subscribe(() => {
        this.emitPageNumber.emit(++this.pageNumber);
      });
  }

  @Input() pageNumber: any;
  @Output() emitPageNumber: EventEmitter<any> = new EventEmitter();
  @HostListener('scroll', ['$event'])
  onScroll(event) {
    console.log('scrolled', event.target.scrollTop);
    let tracker = event.target;
    let limit = tracker.scrollHeight - tracker.clientHeight - 5;
    console.log(event.target.scrollTop, limit);
    if (event.target.scrollTop > limit) {
      this.scrollEvents.next(true);
    }
  }
}

Other option to look would be something like this, but i am not sure you need to try since i have never done directive

constructor(private _el: ElementRef){
  Observable.fromEvent(_el, 'resize')
    .throttleTime(3000)
    .subscribe(() => {
      this.emitPageNumber.emit(++this.pageNumber);
    });
}

Upvotes: 3

Related Questions