lazyload3.directive.ts

export class LazyLoadDirective implements AfterViewInit, OnDestroy {
  // ...

  @Input() index = -1;

  public ngAfterViewInit() {
    // ...

    if (this.index !== -1) { // if [index] given, listen to intersecting index
      const sub = this._service.announcedIntersection.subscribe(params => {
        const { index, state } = params;
        if (!this.toLoad &&
          this.index !== index &&
          this._url && this._url !== NOT_GIVEN &&
          (this.index - index) <= this._service.loadAheadCount) { // close to intersecting
          this.toLoad = true;
          const state = IntersectionState.NearIntersecting;
          this.lazyLoad.emit(state);
        }
      });
      this._subscription.add(sub);
    }
  }

  private load(state: IntersectionState): void {
    this.removeListeners();
    if (this.toLoad) return;

    this.toLoad = true;
    this.lazyLoad.emit(state);

    if (this.index !== -1) { // if [index] given, announce intersecting index
      this._service.announceIntersection({ index: this.index, state });
    }
  }