Router :: Subscribe to Route Changes

This example will change the function of a contextual button in a bootstrap/navbar 
 import { Component, OnInit } from "@angular/core";
import { Router, NavigationEnd } from "@angular/router";

import "rxjs/add/operator/filter";

@Component({
 selector: "my-app",
 templateUrl: `
 <nav class="navbar navbar-fixed-top navbar-light bg-faded">
 <a routerLink="/" class="navbar-brand">{{title}}</a>
 <div class="nav navbar-nav pull-xs-left">
 <a routerLink="/contacts" routerLinkActive="active" class="nav-item nav-link">Contacts</a>
 <a routerLink="/features" routerLinkActive="active" class="nav-item nav-link">Features</a>
 <a routerLink="/tools" routerLinkActive="active" class="nav-item nav-link">Tools</a>
 </div>
 <div class="nav navbar-nav pull-xs-right">
 <button routerLink="contextButtonLink" [disabled]="!contextButtonActive" type="button" class="btn btn-primary">{{contextButtonLabel}}</button>
 </div>
 </nav>
 <router-outlet></router-outlet>
`
})
export class AppComponent implements OnInit {
 title:string = "My App";

 contextButtonLabel:string = "New";
 contextButtonLink:string = "/";
 contextButtonActive:boolean = false;

 constructor(
 # inject the Router
 private router: Router,
 ) {
 }

 ngOnInit() {
 // subscribe to desired router changes, for example NavigationEnd events
 this.router.events.filter(
 e => e instanceof NavigationEnd
 ).subscribe(
 e => { this.contextButton(e); }
 );
 }

 contextButton(event) {
 if (event.urlAfterRedirects === "/contacts") {
 this.contextButtonLabel = "New";
 this.contextButtonLink = "/contacts/new";
 this.contextButtonActive = true;
 } else {
 // this.contextButtonLabel = "Disabled";
 // this.contextButtonLink = "/";
 this.contextButtonActive = false;
 }
 }
}