import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  navOpen: boolean = false;

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart && this.navOpen) {
        this.navOpen = false;
      }
    });
  }

  navToggleHandler() {
    this.navOpen = !this.navOpen;
  }
}

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  navOpen: boolean;

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart && this.navOpen) {
        this.navOpen = false;
      }
    });
  }

  navToggleHandler($event: boolean) {
    this.navOpen = $event;
  }
}

Use event on navToggleHandler for value instead of toggling local member.
Use event on navToggleHandler for value instead of toggling local member.
