Angular - Hide sidebar menu after clicking a menu item

Question

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 https://blog.thecodecampus.de/angular-2-animate-creating-s

Answer 1

You can handle that in router events and set this.menuState to 'out' whenever route changes.

A pretty decent sample code here

Answer 2

You have to do the toggle things in NgZone. And for that first you have to add following module.

import { NgZone } from '@angular/core';

Now create zone variable in constructor

constructor(public zone: NgZone){}

and write your toggle logic in Zone() method like following way

toggleMenu() {
    this.zone.run(()=>{
    this.menuState = this.menuState === 'out' ? 'in' : 'out';
   })
}

Answer 3

Isn't navigation component a child component of app component. Would be nice to have full code of navigation.component.ts. How is the menu state from navigation component send to its parent? Since not sure what is happening , I have put sample code in slackblitz

https://stackblitz.com/edit/animations-in-angular4-2qwdt7?file=app%2Fnavigation.component.ts

Answer 4

I have updated the answer below mentioned link. Toggle nav bar on the click of the sub menu

Answer Updated https://stackoverflow.com/a/58995299/714707

Answer 5

The navigation on every router event would be slower than solutions that only run when needed. (It will run every time when you change route by any links or calls.)

The solution can be just like here to listen to the click event and change state then.