rewrote header reaction to route change as ngrx event

package.json

@@ -64,6 +64,7 @@
     "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.14",
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^2.0.0",
+    "@ngrx/router-store": "^1.2.5",
     "@ngrx/store": "^2.2.1",
     "@ngrx/store-devtools": "^3.2.2",
     "angular2-express-engine": "2.1.0-rc.1",

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 
 import { StoreModule } from "@ngrx/store";
+import { RouterStoreModule } from "@ngrx/router-store";
 import { StoreDevtoolsModule } from "@ngrx/store-devtools";
 
 import reducers from './app.reducers';
@@ -31,6 +32,12 @@ import effects from './app.effects';
      */
     StoreModule.provideStore(reducers),
 
+    /**
+     * @ngrx/router-store keeps router state up-to-date in the store and uses
+     * the store as the single source of truth for the router's state.
+     */
+    RouterStoreModule.connectRouter(),
+
     /**
      * Store devtools instrument the store retaining past versions of state
      * and recalculating new states. This enables powerful time-travel

src/app/header/header.component.ts

@@ -1,5 +1,4 @@
-import { Component, OnInit, OnDestroy, HostListener } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
-import { Router, NavigationEnd, Event } from "@angular/router";
 import { Store } from "@ngrx/store";
 import { HeaderState } from "./header.reducer";
 import { HeaderActions } from "./header.actions";
@@ -10,32 +9,19 @@ import { Observable } from "rxjs";
   styleUrls: ['header.component.css'],
   templateUrl: 'header.component.html'
 })
-export class HeaderComponent implements OnDestroy, OnInit {
+export class HeaderComponent implements OnInit {
-  private routerSubscription: any;
   public isNavBarCollapsed: Observable<boolean>;
 
   constructor(
-    private router: Router,
     private store: Store<HeaderState>
   ) {
   }
 
   ngOnInit(): void {
-    this.routerSubscription = this.router.events.subscribe((event: Event) => {
-      if (event instanceof NavigationEnd) {
-        this.collapse();
-      }
-    });
     this.isNavBarCollapsed = this.store.select('headerReducer')
       .map(({ navCollapsed }: HeaderState) => navCollapsed);
   }
 
-  ngOnDestroy(): void {
-    if (this.routerSubscription) {
-      this.routerSubscription.unsubscribe();
-    }
-  }
-
   private collapse(): void {
     this.store.dispatch(HeaderActions.collapse());
   }

src/app/header/header.effects.ts

@@ -2,6 +2,7 @@ import { Injectable } from "@angular/core";
 import { Effect, Actions } from '@ngrx/effects'
 import { HeaderActions } from "./header.actions";
 import { HostWindowActions } from "../shared/host-window.actions";
+import { routerActions } from "@ngrx/router-store";
 
 @Injectable()
 export class HeaderEffects {
@@ -13,4 +14,8 @@ export class HeaderEffects {
   @Effect() resize$ = this.actions$
     .ofType(HostWindowActions.RESIZE)
     .map(() => HeaderActions.collapse());
+
+  @Effect() routeChange$ = this.actions$
+    .ofType(routerActions.UPDATE_LOCATION)
+    .map(() => HeaderActions.collapse());
 }