Angular Route Start and Route End Events

Question

How can i get access to the routing start and routing end events? I want to show a Progress Bar while routing and loading data.

Can someone tell me how this works?

Answer 1

If you prefer to work with an observable:

import { Router, NavigationStart } from '@angular/router';
...
    constructor(router:Router) {
      router.events.subscribe(e => {
        if(e instanceof NavigationStart) {
          // Init Code
        }

        if(e instanceof NavigationEnd) {
          // Exit Code
        }
      }
    });