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.

The generated menu component using angular Schematics

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.

router outlet added menu component

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.

the 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.

toolbar service implemented menu 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.

ToolbarComponent.cs after using the event emitter
ToolbarComponent.html after using the event emitter
Final MenuComponent.html

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade