Tutorial: Angular Material Navbar

Our application now has a custom header in the app-root component.

Here, we introduce our first Angular Material component. This one will be a Navbar which will be themed with the built-in themes.

Generate a new component

Using the Angular CLI, generate a new component named mat-navbar.

$ ng g component mat-navbar

The CLI creates a new folder, src/app/mat-navbar/ and generates the three files of the MatNavbarComponent.

Your src/app directory should now look like this:

src/
----| app/
---------| mat-navbar/
-------------| mat-navbar.component.css
-------------| mat-navbar.component.html
-------------| mat-navbar.component.spec.ts
-------------| mat-navbar.component.ts
---------| app.component.css
---------| app.component.html
---------| app.component.spec.ts
---------| app.component.ts
---------| app.component.module.ts

Import the MatToolbarModule

The next thing to do is import the Angular Material module for MatToolbar and the new MatNavbarComponent:

src/app/app.component.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { MatToolbarModule } from '@angular/material';
import { MatNavbarComponent } from './mat-navbar/mat-navbar.component';

@NgModule({
  declarations: [
    AppComponent,
    MatNavbarComponent
  ],
  imports: [
    BrowserModule,
    MatToolbarModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Create the <mat-toolbar> in the component HTML

src/app/mat-navbar/mat-navbar.component.html

<mat-toolbar class="mat-elevation-z6 navbar mat-toolbar" color="primary" role="toolbar">
  <mat-toolbar-row class="mat-toolbar-row p-0">
    <div class="col-sm-4 no-gutters p-0">
      <button mat-button class="hamburger mat-button" title="SideNav">
        <span class="mat-button-wrapper">
          <mat-icon class="mat-icon sidenav-open mat-24" role="img" aria-hidden="true">menu</mat-icon>
        </span>
      </button>
    </div>

    <div class="col-sm-4 no-gutters text-center p-0">
      <button mat-button class="mat-button header" title="header">
        <mat-icon class="mat-icon mat-24 align-middle">code</mat-icon>
        <span class="mat-header align-middle m-auto">Angular Material Heroes</span>
      </button>
    </div>

    <div class="col-sm-4 no-gutters align-middle text-right p-0">
      <button mat-button class="mat-button p-0 m-0" title="Angular" type="button"
              onclick="window.open('https://angular.io/')">
        <img src="../../assets/img/mat-navbar/angular-white.svg" alt="Angular svg icon" width="24px" />
      </button>

      <button mat-button class="mat-button p-0 m-0" title="Angular" type="button"
              onclick="window.open('https://material.angular.io/')">
        <img src="../../assets/img/mat-navbar/Google_Material_Design_Logo.png" alt="Material Design png icon" width="24">
      </button>

      <button mat-button class="p-0 m-0" title="Angular" type="button"
              onclick="window.open('https://github.com/codeninja55/angular-material-heroes')">
        <mat-icon class="mat-icon">
          <i class="fa fa-github fa-lg align-middle"></i>
        </mat-icon>
      </button>
    </div>
  </mat-toolbar-row>
</mat-toolbar>

Icon Font

mat-icon makes it easier to use vector-based icons in your app. This directive supports both icon fonts and SVG icons, but not bitmap-based formats (png, jpg, etc.).

In our example above, we have used icons by adding <mat-icon class="mat-icon sidenav-open mat-24" role="img" aria-hidden="true">menu</mat-icon> and <mat-icon class="mat-icon mat-24 align-middle">code</mat-icon>.

This example also shows how to use Font Awesome icons with the <i class="fa fa-github fa-lg"></i>.

Import the pre-built theme and add some styling in the component CSS

src/styles.css

@import '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';
@import './material-colors.min.css';
@import './assets/css/bootstrap-grid.min.css';
@import './assets/css/bootstrap-helpers.min.css';

/* Application-wide Styles */

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: absolute;
  top: 56px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: hidden;
}

This project uses the Bootstrap 4 grid system bootstrap-grid.min.css which can be downloaded from the Bootstrap 4 downloaded here. By using only the grid system, we can maintain the default styling for Angular Material components. Later, we will look at generating our own custom style theme for Angular Material. I have also taken some care in extracting some useful helper and utility selectors from the Bootstrap 4 theme overall. This file can be found in the GitHub repo for this project in src/assets/css/.

To have these stylesheets imported across the whole app, import them from within the src/styles.css stylsheet. Additional application-wide style adjustments to the body will help keep the navbar as an absolute positioned component. Additional styling can be done within the componet stylesheet such as:

src/app/app.component.css

.container-fluid {
  position: absolute;
  height: 100vh;
  overflow-y: auto;
}

src/app/mat-navbar/mat-navbar.component.css

.navbar {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.navbar div {
  height: inherit !important;
}

.mat-button-focus-overlay {
  height: inherit !important;
}

.mat-button {
  height: inherit !important;
  padding: 0 !important;
  min-width: 56px;
}

.hamburger {
  padding: 0 2rem !important;
}

.header {
  min-width: 120px;
  padding: 0 1.25rem !important;
}

Add the new <app-mat-navbar> component to the app-root component

src/app/app.component.html

<app-mat-navbar></app-mat-navbar>

<div class="container-fluid">
  <div class="row red pt-5">
    <div class="col-sm-12 no-gutters">
      <h1 class="mat-display-1 text-center white-text">{{ title }}</h1>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <app-heroes></app-heroes>
    </div>
  </div>
</div>