Updated April 4, 2023
Introduction to Angular material header
Angular material provides us toolbar which can be used to create the header. It is basically a container that allows us to create the title, header, and action in our angular application. We have a build module present inside the material library which allows us to create these header easily and fast. So we should have material installed in the angular application in order to use it. We also require to make few configuration and import inside the application or in the module file in order to use this, without error. In the comings section of the tutorial, we will see how we can implement a header using a toolbar from a material library with practice examples for beginners to understand it better.
Syntax:
As we know that we can make use of ‘toolbar’ to create the headers in the material. So let’s take a closer look at the syntax for using toolbar inside our application to create the headers tile ad action for our application see below;
<mat-toolbar-row>
<span>header ..</span>
// notehr actions goes here ..//
</mat-toolbar-row>As you can see in the above syntax we are trying to create the header for toolbar, using ‘mat-toolbar-row’ which will show our header. Here this toolbar allows us to create such a header inside our application. In the coming section of the tutorial, we will have closer look at the implementation details for it, also we will see more examples to make this clear in a better way possible.
How does header work in Angular material?
By using the material toolbar as we discussed already we can be able to create the header inside our application. Also, we can make use of a toolbar to create the title and actions as well. There is no direct way to create the headers in the material library to can instead make use of the material library. In this section, we will have closer look at the syntax and configuration which is required to create headers inside the toolbar. Let’s get started to see below;
1) MatToolbarModule: This is the module that has to be present inside the root model or the child module we have. By the use, if this we can create the headers inside it. It is nothing but a container that provides us a way to create herders, action, and title inside it, as will have already mentioned there is no direct way to create it. For reference please see the below code and import this inside the root module. see below;
e.g. :
import {MatToolbarModule} from '@angular/material/toolbar';2) mat-toolbar-row: this tag is used to create titles, headers, and actions on the toolbar. For reference please see the below code which will help us to create the row as headers, see below;
e.g. :
<mat-toolbar-row>
<span>your header title or something else can goes here .//</span>
</mat-toolbar-row>As you can see we are trying to use ‘mat-toolbar-row’ which helps us to create the title or headers. we have one more tag which can be used to create the header see below for more information
3) mat-toolbar: this can be used to care for our headers inside the toolbar container we have. Headers can contain the common things for the application which is going to be present on every single page we have. for reference please see below code:
e.g. :
<mat-toolbar>
<span>your header title or something else can goes here .//</span>
</mat-toolbar>let’s now create the angular project with material installed;
- First, we will install Angular CLI, globally which helps us later to installed any angular plugin easily and fast. see below command for reference;
e.g. :
npm install -g @angular/cli)- now create the project an initial scratch project in angular. It is very simple by using the below command;
syntax:
ng new your project namee.g. :
ng new my-first-projectfind this in the folder or directory you have created.
4) install the required dependency inside the project by running the below command;
e.g. :
npm install5) we are all ready with the project setup for angular lets just run the project by type in below command
e.g. :
ng serve6) we can check the application on below URL with a default port of 4200, f you have changed it while project creation
e.g. :
http://localhps:42007) now it is the time to install the material library inside the project that we have created so far, see below;
e.g. :
ng add @angular/materialThat’s it we are ready to go with the application using material library. Now we can use any of its module to cerate the application more interactive, it comes up with default styling, animation, and designing.
Example
Sample example to create headers using the toolbar in the angular material library.
header.component.html code :
<h5><u><i>Header demo using angular material !!</i></u></h5>
<p>
<mat-toolbar>
<span>Header one </span>
</mat-toolbar>
</p>
<p>
<mat-toolbar>
<span>Header Two </span>
</mat-toolbar>
</p>
<p>
<mat-toolbar>
<span>Header three</span>
</mat-toolbar>
</p>
<p>
<mat-toolbar>
<span>Header four</span>
</mat-toolbar>
</p>
<p>
<mat-toolbar>
<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
<mat-icon>menu</mat-icon>
</button>
<span>My menu</span>
<span class="example-spacer"></span>
<button mat-icon-button >
<mat-icon>delete</mat-icon>
</button>
<button mat-icon-button class="example-icon">
<mat-icon>share</mat-icon>
</button>
</mat-toolbar>
</p>2) demo.header.component.ts code :
import {Component} from '@angular/core';
/**
* @title hedare using toolbar in material
*/
@Component({
selector: 'toolbar-demo',
templateUrl: 'demo.header.component.html',
styleUrls: ['demo.header.component.css'],
})
export class HeaderDemo {}3) 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>hedare using toolbar in material</title>
</head>
<body class="mat-app-background">
<toolbar-demo>Loading..</toolbar-demo>
<span class="version-info">Current build: 12.1.1</span>
</body>
</html>4) module.ts code:
import {NgModule} from '@angular/core';
import {MatToolbarModule} from '@angular/material/toolbar';
@NgModule({
exports: [
MatToolbarModule,
]
})
export class DemoHedaerModule {}Output:
Conclusion
We do not have any direct way to create headers using material library but they provide us a way to create them using toolbar from material library. Follow the steps mentioned here, and you can create the header inside our application with minimal effort and with default styling from material library to make it more attractive and user-friendly.
Recommended Articles
We hope that this EDUCBA information on “Angular material header” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
