Angular Material Navigation Bar

Angular Material Navigation Bar

Introduction to the Angular Material Navigation Bar

The angular material also provides us with a navigation bar, which is nothing more than collapsible side content. This type of site content can be used to display the menu of an application or different types of functions available for the application. This type of sidebar is often referred to as a navigation bar, and with the help of material, we can easily implement it. Otherwise a developer has to make a lot of changes to the HTML, CSS and also to maintain this. But the material makes it easy for us to use and design with the default design and style. We will do some settings within the angular app after adding the material library, then it will be ready to use. Here we will see in detail how it works and use this within our application in detail.

Angular Material Navigation Bar Syntax

We have to make use of directives to create our navigation bar using the materials library, let’s see the basic syntax that will create a basic navigation bar for us.

<mat-sidenav-container>
<mat-sidenav mode="side" opened>Text !!</mat-sidenav>
<mat-sidenav-content>Text two !!</mat-sidenav-content>
</mat-sidenav-container>

As you can see from the example above, we are using ‘mat-sidenav-container’, ‘mat-sidenav’ and ‘mat-sidenav-content’, this will be necessary to create our full screen side navigation bar.

How to create a navigation bar in angular material?

Let’s see the different types of directive we have and configuration.

  • MatSidenavModule: This is the main class that contains the directive required to create our navigation bar in the material. This must be imported into the root module or whatever child modules you want to use it in.

For reference, copy the following code into your root module:

Example:

import {MatSidenavModule} from '@angular/material/sidenav';

  • : This is the parent we can say for content and side navigation, it acts as a structure for both.
  • : Within this tag will be present our main content that we want to show as part of the navigation bar.
  • : This directive or tag will add the navigation bar for us, in short it will create the navigation bar as a basic one.

Below we have made use of all three tags to use this:

<mat-sidenav-container class="example-container">
<mat-sidenav mode="side" opened>Navbar </mat-sidenav>
<mat-sidenav-content> Main </mat-sidenav-content>
</mat-sidenav-container>

Now let’s look at the steps that need to be taken to step up our angular material project initially.

1. First install the Angular CLI which allows us to download the necessary packages and library for our project.

You can download it by typing the following command in your command to make sure you have already installed the node.

Example:

npm install -g @angular/cli)

The above command will install the CLI globally on our system, therefore we can use it globally when needed.

2. Now in this step we will try to create the new angular project from scratch, this project will not be a material project that we have to add later by installing the material dependency within our project. So just run the following command at your command prompt and hit enter.

Example:

ng new your project name
>> ng new my-first-project

This command will create the project with the name my-first-project, you can create your project with any name mentioned.

3. Just to make sure you try a command mentioned below to install all the required libraries in our project.

Example:

npm install

4. Now you can test and run your project by typing the simple command mentioned below. This is just to make sure that we are on the right track and that our project has been created without any bugs or errors inside.

Example:

ng serve

5. Go to the browser and try to run the application with the following URL.

Example:

http: // localhps: 4200

By default Angular project runs on port 4200, you can change it according to your needs if needed.

6. Now that everything is set up, we have our Angular project, now we will add the materials library to our project by simply running the following command at the command prompt.

Example:

ng add @angular/material

Angular Material Navigation Bar Examples

Below are the examples mentioned:

Example 1

Basic navigation bar.

HTML code:

<div >Demo navbar</div>
<mat-sidenav-container class="example-container" >
<mat-sidenav mode="side" opened>I am navbar</mat-sidenav>
<mat-sidenav-content><span>Here is content</span></mat-sidenav-content>
</mat-sidenav-container>

Component.ts Code:

import {Component} from '@angular/core';
@Component({
selector: 'sidenav-demo',
templateUrl: 'sidenav-demo.html',
styleUrls: ['sidenav-demo.css'],
})
export class NavBarDemo {
}

Module code:

import {NgModule} from '@angular/core';
import {MatSidenavModule} from '@angular/material/sidenav';
@NgModule({
exports: [
MatSidenavModule,
]
})
export class DemoNavBarMaterial {}

index.html Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title>Demo basic navbar</title>
</head>
<body class="mat-app-background">
<sidenav-demo>Loading..</sidenav-demo>
<span class="version-info">Current build: 12.1.0</span>
</body>
</html>

Production:

Angular Material Navigation Bar 1

Example # 2

Drawbar navigation bar using angular material, it will work and display the navigation bar at the click of a button.

HTML code:

<h5><u><i>Demo navbar !!</i></u></h5>
<mat-drawer-container class="example-container" autosize>
<mat-drawer #drawer class="example-sidenav" mode="side">
<p>I am navbar !!</p>
</mat-drawer>
<div class="example-sidenav-content">
<button type="button" mat-button color="primary" (click)="drawer.toggle()">
click me!!
</button>
</div>
</mat-drawer-container>

Component.ts Code:

import {Component} from '@angular/core';
@Component({
selector: 'sidenav-demo',
templateUrl: 'sidenav-demo.html',
styleUrls: ['sidenav-demo.css'],
})
export class NavBarDemo {
}

module code:

import {NgModule} from '@angular/core';
import {MatSidenavModule} from '@angular/material/sidenav';
@NgModule({
exports: [
MatSidenavModule,
]
})
export class DemoNavBarMaterial {}

index.html Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title>Demo basic navbar</title>
</head>
<body class="mat-app-background">
<sidenav-demo>Loading..</sidenav-demo>
<span class="version-info">Current build: 12.1.0</span>
</body>
</html>

Production:

Angular Material Navigation Bar 2

After clicking the button:

After clicking the button

Conclution

As we have already seen how to create our own navigation bar using angular material library, all steps are mentioned in the article, it is easy to use and maintain with small code changes in existing application. which also makes it readable for developers.

Recommended Articles

This is a guide for the Angular Material navigation bar. Here we discuss the introduction, how to create a navigation bar in angular material? and examples respectively. You can also take a look at the following articles to learn more:

  1. AngularJS class
  2. Angular CLI
  3. AngularJS date filter
  4. Angular 7 form validations

The Angular Material publication navigation bar appeared first in EDUCBA.

Leave a Comment

x