Updated April 4, 2023
Introduction to Angular material snackbar
Angular material provides us a way to display our notification or we can use them to show any message to the user when they performed any task, just to display its status. We can use a snackbar for this provided by the material library, this is also an in-build module or feature which is provided by material in order to show the notification with some message on it in order to notify the user. We have a module present in the material that shows the snackbar-notifications. We can also dismiss this snackbar notification by calling the in-build method provided by it, in the coming section of the tutorial we will have closer look at the implementation and usage for snackbar in detail for better clarity and understanding.
Syntax
To use snackbar inside the application we require to write few lines of code because it is an action that needs to be invoked, let’s take a closer look at the syntax for opening a snackbar notification bar on the click of action, see below;
export class clas_name {
constructor(private variable_name: MatSnackBar) {}
function_name(your_msg: string, yor_action: string) {
this._snackBar.open();
}
}As you can see in the above lines of syntax we have added few changes by using the method of the snackbar, for now, we will just have to look at the method which is ‘open’ it properly.
How to create snackbar in Angular material?
As of now we already know that snackbar from angular material can be used to show the notification with two things message and action needs to be performed. It provides us few methods which can be used to perform an action on the snackbar. In this section we will see what configuration is required to make this work in our application, Let’s get started;
1) MatSnackBarModule: This is the module or we can say in the build module which is provided by the material library this has to be present inside the root module or any other child module in which we are using it. For reference please find the below code and use it in our application,
eg:
import {MatSnackBarModule} from '@angular/material/snack-bar';We would also require the object of the snackbar in our component class, which we will see later in detail
2) Methods: This provides us different methods which can be used to perform an action on the snackbar we have created, let’s see some of the important ones see below;
- open: This method is responsible to open the snackbar and takes two parameters as the input variable. (message) (action)
- dismiss: this method is responsible to dismiss the currently visible snackbar.
- openFromTemplate: open with a custom template.
- openFromComponent: open with custom component.
Steps needed to create the object:
1) Import inside the component:
e.g. :
import {MatSnackBar} from '@angular/material/snack-bar';2) create an object inside the constructor of the class :
e.g. :
constructor(private _snackBar: MatSnackBar) {}3) Use objects to call the methods like below;
e.g. :
demo(msg: string, ac: string) {
this._snackBar.open(msg, ac);
}Now let’s get started with the steps that need to be taken in order to step up our angular material project initially for beginners see below;
1) First install the angular CLI which enables us to download the required packages and library for our project. You can download it by typing the below command on your command make sure you have already installed node see below;
e.g. :
npm install -g @angular/cli)The above command will install the CLI globally in our system hence we can use it globally when required.
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 inside our project. so just execute the below command on your Command Prompt and press enter see below;
e.g. :
ng new your project name
>> ng new my-first-projectThis 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 try one command which is mentioned below to install all the required library into our project,
e.g. :
npm install4) Now you can test and run your project by typing the simple command which is mentioned below. This is just to make sure that we are on the right track and our project has been created without any error or bugs inside it.
e.g. :
ng serve5) go on browser and try to run the application with the below URL :
e.g. :
http://localhps:4200By default, the angular project runs on port 4200, you can change it as per your need if required.
6) Now everything is set we have our angular project now we will add the material library to our project just by running the below command on the command prompt;
e.g. :
ng add @angular/materialExample
1) demo.snackbar.component.ts code:
import {Component} from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar';
/**
* @title Demo snackbar!
*/
@Component({
selector: 'snack-bar-demo',
templateUrl: 'demo.snackbar.component.html.html',
styleUrls: ['demo.snackbar.component.html.css'],
})
export class SnackBarDemoComponent {
constructor(private mysnackbar: MatSnackBar) {}
showSnackbar(msg: string, action: string) {
this.mysnackbar.open(msg, action);
}
}2) demo.snackbar.component.html code:
<h5><u><i>Snack-bar demo, Angular material !!</i></u></h5>
<mat-form-field appearance="fill">
<mat-label>My Message</mat-label>
<input matInput value="Snack-bar Created!" #mymessage>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>My Action</mat-label>
<input matInput value="Do something" #myaction>
</mat-form-field>
<button mat-stroked-button (click)="showSnackbar(mymessage.value, myaction.value)">Click Me!!</button>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>Demo snackbar!</title>
</head>
<body class="mat-app-background">
<snack-bar-demo>Loading.. </snack-bar-demo>
<span class="version-info">Current build: 12.1.1</span>
</body>
</html>4) module.ts code :
import {NgModule} from '@angular/core';
import {MatSnackBarModule} from '@angular/material/snack-bar';
@NgModule({
exports: [
MatSnackBarModule,
]
})
export class DemoSnackBarModule {}Output:
Conclusion
By the use of snackbar we can easily notify our user, with the meaning message on the snackbar, this is very easy to use, handle and maintain by the developer and it is quick to build as well with default styling and designing.
Recommended Articles
We hope that this EDUCBA information on “Angular material snackbar” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
