title: Angular - Hide sidebar menu after clicking a menu item
body: <p>I created a sidebar menu, but I am not able to hide the menu after I click on a menu item. I followed the example from <a href="https://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation/" rel="noreferrer">https://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation/</a></p>
  
  <p>Do I need to call toggleMenu on (click) of every hyper link from html? If yes, how do I call a method which is in app.component.ts from another component?</p>
  
  <p>Need help please...</p>
  
  <p>I am using Angular 4 with bootstrap 4.</p>
  
  <p>Here is my code:
  app.component.html:</p>
  
  <pre><code>&lt;button (click)="toggleMenu()" class="hamburger"&gt;
    &lt;span&gt;toggle menu&lt;/span&gt;
  &lt;/button&gt;
  
  &lt;!--  &lt;app-menu [@slideInOut]="menuState"&gt;&lt;/app-menu&gt;  --&gt;
  &lt;navigation-component [@slideInOut]="menuState"&gt; &lt;/navigation-component&gt;
  
  &lt;div class="container-fluid"&gt;
    &lt;alert&gt;&lt;/alert&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>navigation.component.mobile.html:</p>
  
  <pre><code>    &lt;li&gt;&lt;a routerLink="/home" routerLinkActive="active"&gt; Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#submenu1" data-toggle="collapse"&gt;Alert&lt;/a&gt;
          &lt;ul id="submenu1" class="list-unstyled collapse"&gt;
              &lt;li&gt;&lt;a routerLink="/linesidemonitor" data-toggle="collapse" data-target=".navbar-collapse.show"&gt;IQS Alert&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li routerLinkActive="active" [hidden]="!authenticated()"&gt;
          &lt;a href="#submenu2" data-toggle="collapse"&gt;Configuration&lt;/a&gt;
          &lt;ul id="submenu2" class="list-unstyled collapse"&gt;
              &lt;li&gt;&lt;a routerLink="/contact" data-toggle="collapse" data-target=".navbar-collapse.show"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a routerLink="/department" data-toggle="collapse" data-target=".navbar-collapse.show"&gt;Departments&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a routerLink="/notificationlevel"&gt;NotificationLevels&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a routerLink="/recipient"&gt;Recipients&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre><code>@Component({
    selector: 'app-root',
    templateUrl: './'  + (window.innerWidth &gt; 745 ? 
            'app.component.html' :
            'app.component.mobile.html'),
    styleUrls: ['./app.component.css'],
    animations: [
                 trigger('slideInOut', [
                   state('in', style({
                     transform: 'translate3d(0, 0, 0)'
                   })),
                   state('out', style({
                     transform: 'translate3d(100%, 0, 0)'
                   })),
                   transition('in =&gt; out', animate('400ms ease-in-out')),
                   transition('out =&gt; in', animate('400ms ease-in-out'))
                 ]),
               ]
  })
    toggleMenu() {
        // 1-line if statement that toggles the value:
        this.menuState = this.menuState === 'out' ? 'in' : 'out';
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/IBDBr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IBDBr.png" alt="enter image description here"></a></p>
  
  <p>UPDATE:</p>
  
  <p>I tried to call toggleMenu(). It is working, but the page is loading again. Earlier it used to be like AJAX call(quick), but now it is like a new page loads first time. So I need help on how to do it as it done in <a href="http://parlaybuddy.razartech.com/no-auth" rel="noreferrer">http://parlaybuddy.razartech.com/no-auth</a></p>
  
  <p><a href="https://jmouriz.github.io/angular-material-multilevel-menu/demo/demo.html#!/demo/views/item-1-1" rel="noreferrer">https://jmouriz.github.io/angular-material-multilevel-menu/demo/demo.html#!/demo/views/item-1-1</a></p>
  
  <p><a href="https://stackblitz.com/edit/dynamic-nested-sidenav-menu" rel="noreferrer">https://stackblitz.com/edit/dynamic-nested-sidenav-menu</a></p>
  
  <p>navigation.component.ts</p>
  
  <pre><code>toggleMenu() {
      this.toggleMenu();
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>       &lt;ul id="submenu2" class="list-unstyled collapse"&gt;
              &lt;li&gt;&lt;a class="submenu" routerLink="/contact"  (click)="toggleMenu()"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="submenu" routerLink="/department" (click)="toggleMenu()"&gt;Departments&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p><strong>SOLUTION:</strong></p>
  
  <p>As Santosh metioned I added below code in app.component.ts and it worked as expected. Thank you Santosh</p>
  
  <pre><code>  constructor(private http: Http,
            private router: Router,
            public zone: NgZone) {
            router.events.subscribe( (event: Event) =&gt; {
                if (event instanceof NavigationStart) {
                    this.menuState = 'out';
                }
  
                if (event instanceof NavigationEnd) {
                    // Hide loading indicator
                }
  
                if (event instanceof NavigationError) {
                    // Hide loading indicator
                    // Present error to user
                    console.log(event.error);
                }
            });
    }
  </code></pre>