Updated April 4, 2023
Introduction to Angular material footer
In Angular we can create a footer by making use of ‘mat-sidenav-container’ it is a container inside which we can place all our compounds that needs to be there on the page for the user. The footer div for the tag will go at the end of this tag, with few configurations inside the CSS file itself. But this container makes it easy to use, as we can define header inner body actions, and footer as well the way we want. There is no direct way to create a footer just by adding the tag in angular material we have to have some CSS in place in order to work it properly. In the coming section of the tutorial, we will see how we can implement this in our angular application with a few or more changes inside the code but they will be very simple and easy to understand.
Syntax
As we already know that we do not have any direct way to use or create the footer in angular material but still we can make use of ‘mat-sidenav-container’ which maintain our inside tag properly, let’s have a closer look at the syntax for it to see below;
<mat-sidenav-container fullscreen>
// your logic for header and other panel ../
<div class="footer" #footer>
your header
</div>
</mat-sidenav-container>As you can see we are trying to define the footer inside the ‘mat-sidenav-container’ but this alone will not work we will also make changes to the CSS file in the coming section of the tutorial, to make this work properly for beginners.
How does the footer work in Angular material?
As of now we already know that we cannot create the footer inside the material library directly however we can have different ways to create it. In this article we will have look at the normal approach by using ‘mat-sidenav-container’, it is an inbuilt material module which helps to manage the different component inside it. In this section, we will have closer look at the configuration required to make this work properly inside our application so let’s get started;
1) MatSidenavModule: This needs to be imported inside the package. This will help to manage the component well. because it is a container that is used to place our title, headers, footers inside it. For reference please follow the below the line of code which is necessary to have in the project either inside the root module or any of the child modules in which we want to use it see below;
e.g. ;
import {MatSidenavModule} from '@angular/material/sidenav';2) In this we are also making use of ‘mat-toolbar’ by this we can add actions, headers and other components to the UI. For this, we have to have this module imported inside the application in order to use this without error.
for reference see the below code :
e.g. :
import {MatToolbarModule} from '@angular/material/toolbar';Import this as well with the ‘MatSidenavModule’, in the same file for better understanding.
3) Now we can create a simple ‘div’ tag to create our tag in the material library, all this should be used all together else there will be no use in using the footer alone on the page. Below we will do some CSS changes inside our file, to place the footer at the end of the page, let’s take a closer look at the piece of code;
e.g. :
.footer {
position: fixed;
bottom: 0;
}This two property is very important in our example for the footer, if we do not make the bottom as ‘0’, then it will not show at the bottom, hence our functionality will be a break. now let’s take a closer look at the angular application set up with the material library installed inside it, if you are a beginner then follow these below steps to step up your angular application from scratch let’s get started;
Example
sample example to create footer using the material in build module with few CSS and modification let’s get started;
1) 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>footer demo</title>
</head>
<body class="mat-app-background">
<my-app>loading</my-app>
</body>
</html>2) demo.footer.component.ts code:
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { MatToolbar } from '@angular/material/toolbar';
@Component({
selector: 'my-app',
templateUrl: './demo.footer.component.html',
styleUrls: [ './demo.footer.component.css' ]
})
export class DemoFooterComponent implements AfterViewInit {
@ViewChild("toolbar") toolbar: MatToolbar;
@ViewChild("main") main: ElementRef;
@ViewChild("footer") footer: ElementRef;
constructor(){
}
ngOnInit(){
}
ngAfterViewInit(){
}
}3) demo.footer.component.html code:
<mat-sidenav-container fullscreen>
<h5><u><i>Footer creation using angular material !!</i></u></h5>
<mat-sidenav #sidenav class="sidenavstyle">
<mat-list>
<mat-list-item > Item 1 </mat-list-item>
<mat-list-item > Item 2 </mat-list-item>
<mat-list-item > Item 3 </mat-list-item>
<mat-list-item > Item 4 </mat-list-item>
<mat-list-item > Item 5 </mat-list-item>
</mat-list>
</mat-sidenav>
<mat-toolbar color="primary" #toolbar>
<button mat-icon-button color="accent" aria-label="Example icon button with a menu icon" (click)="sidenav.open()">
<mat-icon>menu</mat-icon>
</button>
<span>This is my header</span>
</mat-toolbar>
<mat-toolbar color="primary" #toolbar>
<button mat-icon-button color="accent" aria-label="Example icon button with a menu icon" >
<mat-icon>star</mat-icon>
</button>
<button mat-icon-button color="accent" aria-label="Example icon button with a menu icon" >
<mat-icon>pets</mat-icon>
</button>
<button mat-icon-button color="accent" aria-label="Example icon button with a menu icon" >
<mat-icon>android</mat-icon>
</button>
<button mat-icon-button color="accent" aria-label="Example icon button with a menu icon" >
<mat-icon>flutter_dash</mat-icon>
</button>
<button mat-icon-button color="accent" aria-label="Example icon button with a menu icon" >
<mat-icon>palette</mat-icon>
</button>
</mat-toolbar>
<br/> <br/> <br/> <br/>
<mat-toolbar>
<img src="https://lh5.googleusercontent.com/p/AF1QipN_aupGaqTiv5_xbfKTl2qZz0XAJlGMt0WucgkU=w319-h100-k-no" alt="Photos of educba">
</mat-toolbar>
<div class="footer" #footer>
Hi !! I am footer !!!!
</div>
</mat-sidenav-container>4) demo.footer.component.css code :
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background-color: rgb(221, 148, 13);
color: rgb(9, 2, 24);
text-align: center;
margin: 0px;
}
.content {
position: absolute;
background-color: blueviolet;
width: 98%;
border: 1px solid rgb(18, 141, 38);
margin: 5px;
/* bottom: -50px; */
height: 80%;
max-height: 100%;
overflow: auto;
}
.sidenavstyle{
background-color: rgb(4, 61, 21);
color: rgb(208, 206, 216);
}Output:
Conclusion
There is no direct module or directive present in angular to create the footer, but still, we can make use of the in-build module for faster and easier development. Follow the above-mentioned steps in the article to work and easily create your first footer using the angular material library.
Recommended Articles
We hope that this EDUCBA information on “Angular material footer” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
