Add navigation panel using material UI in Angular 12 in 5 easy steps

The blog is under update…..

[Sidebar drawer and top header panel]

Let’s set up a basic Master panel setup for Angular Finally, let’s modify the app.compnent.html file to complete the routing part for now:

<app-layout>
<mat-sidenav-container>
<mat-sidenav #sidenav role=”navigation”>
<! — this is a place for us to add side-nav code →
</mat-sidenav>
<mat-sidenav-content>
<! — in here all the content must reside. We will add a navigation header as well →
<main>
<router-outlet></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
</app-layout>

Add Below scss code in app.component.scss file

mat-sidenav-container,mat-sidenav-content,mat-sidenav {height: 100%; }
mat-sidenav { width: 250px;}
main { padding: 10px;}

Add Below scss code in styles.scss file

mat-sidenav-container, mat-sidenav-content, mat-sidenav { height: 100%; }
mat-sidenav { width: 250px;}
main { padding: 10px;}

Creating Navigation Header for Menu actions

To create a navigation header, we need to use the mat-toolbar element. But first thing first.

This component has its own module, so we need to register that module inside the material.module.ts file as we have discussed in the previous tutorial:

Let’s create a new header component:

ng g c navigation/header — skipTests

Let’s update header.component.html with below code

<mat-toolbar color=”primary”>
<div fxHide.gt-xs>
<button mat-icon-button (click)=”onToggleSidenav()”>
<mat-icon>menu</mat-icon>
</button>
</div>
<div>
<a routerLink=”/home”>Owner-Account</a>
</div>
<div fxFlex fxLayout fxLayoutAlign=”end” fxHide.xs>
<ul fxLayout fxLayoutGap=”15px” class=”navigation-items”>
<li>
<a routerLink=”/owner”>Owner Actions</a>
</li>
<li>
<a routerLink=”/account”>Account Actions</a>
</li>
</ul>
</div>
</mat-toolbar>

As you can see, we use the directive fxHide.gt-xs, which states that this part should be hidden only on the screen that is greater than the extra small.

After this we have to put code as below for input header bar in main navigation. add <app-header></app-header> tag above the <main> tag.

We have another part of the navigation which is positioned on the end of the navbar and hidden only for the extra small screen.

Add scss in header.component.scss

a {text-decoration: none;color: white;

&:hover {color: lightgray;}
&:active {color: lightgray;}

}

.navigation-items {list-style-type: none;padding: 0;margin: 0;}

mat-toolbar {border-radius: 3px;}

@media max-width: 959px) { mat-toolbar {border-radius: 0px;} }

Add code to header.component.ts file

import { Component, OnInit, Output, EventEmitter } from ‘@angular/core’;
@Component({
selector: ‘app-header’,
templateUrl: ‘./header.component.html’,
styleUrls: [‘./header.component.css’]
})

export class HeaderComponent implements OnInit {
@Output() public sidenavToggle = new EventEmitter();
constructor() { }
ngOnInit() { }
public onToggleSidenav = () => { this.sidenavToggle.emit(); }
}

If you want to learn more about @Output directives,
you can read Angular Decorators[LINK].

Now, replace
<app-header ></app-header>
with
<app-header (sidenavToggle)=”sidenav.toggle()” ></app-header>