Angular Material Navbar with Toolbar Show Hide Option
Hello friends!Recently I am developing a web application by my own and learning at the same time with angular 5 and material 5.2.5.Through my learning process I am facing to many problems and trying to write down some stories to explain how to overcome from those.
In here i am going to explain how to create the angular material toolbar and navbar component and how to control the visibility of the toolbar from other components.
First we have to create our menu component.For that we can use the angular material schematics in angular material 6.4.7. Unfortunately this feature not available in the angular material 5.2.5.So i created a separate angular material 6.4.7 project and generate the navigation component using the command.
ng generate @angular/material:material-nav --name <component-name>Then i copied this to my angular material 5.2.5 menu component.

But i have to have a routing with my nav bar.so simply i move the
<main><router-outlet></router-outlet></main>
inside the material-sidenav-content.

When we want to show/hide the toolbar from other components we can use event emitter / common service.Personally i feel common service is easy to use and gives you a clean separation from components.So i went for the second option.
I created a separate service called ToolbarService.ts.

Here i am using observable for async change detection from the html.If you want you can use use simple boolean for this.To use this in our menu component then we have to have a public toolbar service property in our component.

Then using the command
*ngIf="(toolbarService.visible|async)"we can show/hide tool bar from other components.For example if i want to hide the toolbar in the login component,then using the toolbarService hide() method in ngOnInit() method i can simply hide the toolbar.
In this implementation i got an error “ExpressionChangedAfterItHasBeenCheckedError”.After googling i found that this is happening because of the visible property from toolbarService is changing after the menu component initialization.I fixed this error by moving the toolbar section in to new component and use the service there.When separation time we have to face one issue,that is we cant communicate the navbar toggle event.To fix this i used the event emitter in the toolbar component and trigger the nave bar toggle() event from there.



You can now enjoy to see a responsive Sidenav with the toolbar.also you can show/hide the toolbar in any component.There is an alternate to this is use route with separate toolbar component.you can achieve same from that also.
