/*
 * FROM:
 */


@Component({
  selector: 'some-other-component'
})
export class SomeOtherComponent {
  private _el: any;
  constructor(private _elementRef: ElementRef, private _renderer: Renderer2){}

  public ngOnInit() {
     this._el = this._renderer.selectRootElement(this._elementRef);
     this.renderLoop_();
  }

 private renderLoop_() {
    this.renderScrollBar_();
    fd.measure(() => this.renderLoop_());
  }

  private renderScrollBar() {
    fd.measure(() => {
      const scroll = window.scrollY + 100;
      fd.mutate(() => {
         this._el.top = `${scroll}px`;
      });
    });
  }
}

/*
 * TO:
 */

export class SomeOtherComponent {
  private _el: any;

  @Mutate() // maybe @HostBinding is naturally a Mutation?
  @HostBinding('style.top') top = this._calcWindow();
  constructor(){}

  public ngOnInit() {
     this._renderScrollBar();
  }

  @Measure()
  private _calcWindow() {
    return `${window.scrollTop + 100}px` ;
  }

  @Measure('loop')
  private _renderScrollBar() {
    this._setElTop();
  }
}

/*
 * TO throttled by scroll:
 */

export class SomeOtherComponent {
  private _el: any;
  @ViewChild(CdkScrollable) child: cdkScrollable;
  @Mutate() // maybe @HostBinding is naturally a Mutation?
  @HostBinding('style.top') top = this._calcWindow();
  constructor(){}

  public ngOnInit() {
     this._renderScrollBar();
  }

  @Measure()
  private _calcWindow(event) {
    return `${event.target.scrollTop + 100}px` ;
  }

  /**
   * Measure decorater could take 3 parameters: optional loop, throttleBy Observable, A return of the throttler
   * @param {string} loop Will recusively loop the method decorated.
   * @param {Observable<Event>=} cdkScrollable.elementScrolled() will will cancel and start the requestAnimationFrame Loop based on Obserable.
   * @param {Array<Event>=} A return of the throttled method.
   */
  @Measure('loop', cdkScrollable.elementScrolled(), [$event])
  private _renderScrollBar() {
    this._setElTop($event);
  }
}