Using requestAnimationFrame in angular2

Question

I want to implement infinite scroll in angular2 which

1. automatically removes DOM which are out of viewport.
2. uses requestAnimationFrame instead onscroll.

I noticed above was implemented using Mithriljs which is available in below link. I am confused on how to use requestAnimationFrame and build a class called ScrollListener in angular2. Please suggest?

https://github.com/flarum/core/blob/master/js/lib/utils/ScrollListener.js

https://github.com/flarum/core/blob/master/js/forum/src/components/PostStream.js

PS: Sorry for my English. I am not a native English speaker.

Answer 1

Not sure what information you need exactly

Here is an example

class RafQueue {
  currentFrameId: number;
  constructor(public callback: Function, public frames: number) { this._raf(); }
  private _raf() {
    this.currentFrameId = DOM.requestAnimationFrame(timestamp => this._nextFrame(timestamp));
  }
  private _nextFrame(timestamp: number) {
    this.frames--;
    if (this.frames > 0) {
      this._raf();
    } else {
      this.callback(timestamp);
    }
  }
  cancel() {
    DOM.cancelAnimationFrame(this.currentFrameId);
    this.currentFrameId = null;
  }
}

but I run into https://github.com/angular/angular/issues/6904 recently (not checked since if it's working again)