Display duration Angular Zone has been stable for

some.component.html

<pre>NgZone has been stable for {{stableSinceSecondsAgo | async | number:'.3-3'}} seconds</pre>

some.component.ts

class SomeComponent {
  public stableSinceSecondsAgo: Observable<number>;

  constructor(zone: NgZone, cdr: ChangeDetectorRef) {

    zone.runOutsideAngular(() => {
      this.stableSinceSecondsAgo = this.zone.onStable
        .timestamp()
        .throttleTime(300)
        .switchMap((ts) => Observable.timer(0, 300).mapTo(ts))
        .map(ts => (new Date().valueOf() - ts.timestamp) / 1000)
        .do(() => cdr.detectChanges());
    });
    
}