Showing spinner

In the last example let's use the events observable to show the spinner during navigation:

class MailAppCmp {
  constructor(r: Router, spinner: SpinnerService) {
    r.events.
      // Fitlers only starts and ends.
      filter(e => isStart(e) || isEnd(e)).

      // Returns Observable<boolean>.
      map(e => isStart(e)).

      // Skips duplicates, so two 'true' values are never emitted in a row.
      distinctUntilChanged().

      subscribe(showSpinner => {
        if (showSpinner) {
          spinner.show();
        } else {
          spinner.hide();
        }
      });
  }
}