Angular Material Navbar

In this lecture we'll take a look at angular material navigation components starting with the toolbar typically the toolbar displays information and actions relating to the current screen it's used for branding, screen titles navigation and actions in this article we'll only focus on how the toolbar can be used as a navbar.

First Step: Importing the module

In order to work with the toolbar you need to import the material toolbar module in material.module.ts and add it MaterialComponents array.

import {
  MatToolbarModule
} from "@angular/material";

const MaterialComponents = [
  MatToolbarModule
];

Second Step: Use the toolbar component in HTML

Now after importing the MatToolbarModule let's use it as a component in HTML the name of it's component is <mat-toolbar> within the toolbar I'm going to add a span tag that says Material is Awesome.

<mat-toolbar>
  <span>Material is Awesome</span>
</mat-toolbar>

If you save the file and see the browser you should be able to see a basic toolbar like this. toolbar component

Change the toolbar color

We can change the color of material toolbar component using color attribute, the color attribute accepts either primary, accent or warn as it's value.

<mat-toolbar color="primary">
  <span>Material is Awesome</span>
</mat-toolbar>
<br />
<mat-toolbar color="accent">
  <span>Material is Awesome</span>
</mat-toolbar>
<br />
<mat-toolbar color="warn">
  <span>Material is Awesome</span>
</mat-toolbar>

Change the toolbar color

Convert a basic toolbar into a navbar

Let's see how to convert a basic material toolbar into a navbar, typically a navbar consists of the brand title on the left and a group of links on the right, so let's change that code to match this way.

<mat-toolbar color="primary">
  <div>Material is Awesome</div>
  <div>
    <span>Home</span>
    <span>About</span>
    <span>Contact</span>
  </div>
</mat-toolbar>

If you save the file and take a look at the browser you'll see that it doesn't look like a navbar. Convert a basic toolbar into a navbar

To change this all we need is to distribute the space in the toolbar in between the title and the links so in the SCSS which is app.component.scss let's add a class .navbar and specify justify-content: space-between and also let's add some spacing between the span tags.

.navbar{
  justify-content: space-between;
}
span{
  padding-right: 1rem;
}

Finally let's add .navbar class to <mat-toolbar> and save the file.

<mat-toolbar color="primary" class="navbar">
  <div>Material is Awesome</div>
  <div>
    <span>Home</span>
    <span>About</span>
    <span>Contact</span>
  </div>
</mat-toolbar>

Now if you take a look at the browse you should have a proper navbar brand on the left and a set of links on the right. proper navbar

The styling is completely up to you but a toolbar is what you need to use create a navbar in angular material.