bob-lee

/**
 * Collapsible & sticky headers
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

* {

bob-lee

            "scripts": [
              "src/intersection-observer.js"
            ]

bob-lee

<div class="list" [@listChild]="noteService.listState">
  <my-note class="item" #myNote
    *ngFor="let note of noteService.items$ | async; let i = index"
    (lazyLoad)="myNote.doLoad($event,i)" [url]="note.imageURL" [index]="i">
  </my-note>
</div>

bob-lee

export class LazyLoadService {
  // ...

  private _loadAheadCount = 2; // default 2
  get loadAheadCount() { return this._loadAheadCount; }
  set loadAheadCount(value: number) {
    this._loadAheadCount = value;
  }

  // announce intersecting index to [lazyLoad] directives

bob-lee

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 => {

bob-lee

export class LazyLoadDirective implements AfterViewInit, OnDestroy {
  private _url = '';

  @Input()
  set url(value: string) { // optional
    if (!this._url && value) { // url added runtime
      this.doRegister();
    }
    this._url = value;
  }

bob-lee

  ngOnInit() { // parent component creation
    // ...
    this.lazyLoadService.registerAfter(1500);
  }

bob-lee

export class LazyLoadDirective implements AfterViewInit, OnDestroy {

  public ngAfterViewInit() {
    if (this._service.delayMsec > 0) { // register later
      const sub = this._service.announcedOrder.pipe(first()).subscribe(_ => this.doRegister());
      this._subscription.add(sub);
    } else { // register now (default)
      this.doRegister();
    }
  }

bob-lee

export class LazyLoadService {
  delayMsec = 0;

  // announce order to [lazyLoad] directives
  private order$ = new Subject<string>();
  announcedOrder = this.order$.asObservable();
  announceOrder(name: string) {
    this.order$.next(name);
  }

bob-lee

<div class="list" [@listChild]="noteService.listState">
  <my-note class="item"
    *ngFor="let note of noteService.items$ | async">
  </my-note>
</div>