Add Block UI for Angular4

BlockUIForAngular4.ts

import { Component } from '@angular/core';
import {
  Router,
  // import as RouterEvent to avoid confusion with the DOM Event
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'
import { BlockUI, NgBlockUI } from 'ng-block-ui';

@Component({
  // tslint:disable-next-line
  selector: 'body',
  template: '<block-ui><router-outlet></router-outlet></block-ui>'
})
export class AppComponent {
  @BlockUI() blockUI: NgBlockUI;
  constructor(private router: Router) {
    router.events.subscribe((event: RouterEvent) => {
      this.navigationInterceptor(event)
    })
  }
  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.blockUI.start('Loading...');
    }
    if (event instanceof NavigationEnd) {
      this.blockUI.stop(); // Stop blocking
    }
    // Set loading state to false in both of the below events to hide the spinner in case a request fails
    if (event instanceof NavigationCancel) {
      this.blockUI.stop(); // Stop blocking
    }
    if (event instanceof NavigationError) {
      this.blockUI.stop(); // Stop blocking
    }
  }

}