Subscribe Us

Angular Material SnackBar Tutorial


 
Angular Material SnackBar Tutorial

 

Angular Material SnackBar

 

Introduction

In this tutorial let's take a look at the snack bars. An angular material snack bars are basically, like notifications that inform users of some operation that has been performed.They appear for a short
duration at the bottom of the screen and they don't require user input to disappear and at any point in time only one snack bar notification may be displayed.

Description

Let's begin by importing the module so in material.module.ts import MatSnackBarModule and added to the material array.

import { NgModule } from '@angular/core';
import {MatButtonModule, MatButtonToggleModule, MatSnackBarModule} from '@angular/material'

const MaterialComponents=[MatButtonModule, MatButtonToggleModule];

@NgModule({
imports: [MaterialComponents],
exports: [MaterialComponents]
})
export class MaterialModule { }

Now in our HTML let's add a button that will open the snack bar so button add the mat button attribute and handle the click event on click we will call a method called open snack bar passing in a string item deleted as argument the button text is going to show snack bar.

<button mat-button (click)="openSnackBar('Item deleted')">
Show Snack Bar
</button>
So we now have a button that called the openSnackBar method let's go to the class component and define that method to open a snack bar.

We need to make use of a service and that service is mat snack bar from angular slash material so go ahead and import it and once you import it injects it in the constructor. private snack bar of type MatSnackBar. Now we can define the open snack bar method which will open the snack bar
so open snack bar accepts a message and within the body, we use the service instance and call the open method passing in the message so the service the instance is this dot snag bar and we call open passing in the message if we .

import { Component } from '@angular/core';
import {MatSnackBar} from '@angular/material'

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private snackBar:MatSnackBar){}

openSnackBar(message){
this.snackBar.open(message);
}
}
Now save all the files and take a look at the browser we should have a button and when I click on the button the snack bar should pop up at the bottom of the screen with the message item deleted.



So we have a basic snack bar working as expected apart from the message we can also specify an action for a snack bar the action is specified as the second the argument to the open method on the the service instance

To keep the open snack bar method more generic I will pass the action parameter as well from the click handler so in the HTML the second the parameter is going to be the string dismiss. in the component class the the method will now take a second parameter which is action and the same is passed to the open method.

<button mat-button (click)="openSnackBar('Item deleted','dismiss')">
Show Snack Bar
</button>

import { Component } from '@angular/core';
import {MatSnackBar} from '@angular/material'

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private snackBar:MatSnackBar){}

openSnackBar(message, action){
this.snackBar.open(message,action);
}
}
If you now take a look at the browser click on the button a snack bar opens and you can see the message item deleted and the action dismiss when I click on this action by default it closes the snack bar.



A typical use case for this type of snack bar is usually to undo an the operation, for example, let me rename the button to delete and the action to undo but when the user does click on this action we want to execute some code that will undo the operation the way we are alerted. When the snack bar is dismissed or the action is clicked is by using observable.

<button mat-button (click)="openSnackBar('Item deleted','undo')">
Delete
</button>
So in the component class we are going to start by storing a reference to the a snack bar that has been opened.

import { Component } from '@angular/core';
import {MatSnackBar} from '@angular/material'

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private snackBar:MatSnackBar){}

openSnackBar(message, dismiss){
let snackBarRef=this.snackBar.open(message,dismiss);
snackBarRef.afterDismissed().subscribe(()=>{
console.log('The snackbar was dismissed');
});

snackBarRef.onAction().subscribe(()=>{
console.log('The snackbar action was triggered');
});
}
}
If we now go back to the the browser and open dev tools click on the delete button and click on the action we can see the log statements in the console action was clicked and the snack the bar was dismissed.

 

I just have the console log statements but you can have the code to undo the deletion so we have the message and the action which is passed to the open method, there is also a third the parameter which accepts some configuration the one which would be used mostly is the duration property the Burien property indicates the length of time in milliseconds to wait before automatically dismissing the snack bar I will add an object with the property duration and set it to 2000 which is 2
seconds say comma and object duration set to 2 seconds.

openSnackBar(message, dismiss){
let snackBarRef=this.snackBar.open(message,dismiss, {duration:2000});
snackBarRef.afterDismissed().subscribe(()=>{
console.log('The snackbar was dismissed');
});

snackBarRef.onAction().subscribe(()=>{
console.log('The snackbar action was triggered');
});
}
If you now go back to the browser click on the button the snack bar pops up but after two seconds it automatically dismisses and in the console, you can see the log statement so the after dismissed part of the code was executed when the the snack bar was dismissed so when you have an action you can use the on action observable and when you don't have an action but want to execute some code when the snack bar has dismissed the place that code and the after dismissed observable.

The last point to discuss is about the open from the component method as the name indicates the open from the component method creates and opens a snack bar with a custom component for the content. let's take a look at an example.

<span style="color: orange;">Custom Snackbar</span>


As you can see the the template is a span tag with the color set to orange now in the app module I will add the component in the declarations array and add to another property called entry components.


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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { CustomSnackBarComponent } from './custom-snack-bar/custom-snack-bar.component';

@NgModule({
declarations: [
AppComponent,
CustomSnackBarComponent
],
entryComponents:[CustomSnackBarComponent],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MaterialModule
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule { }
All right now that we have a component to display as custom content let's add a button and a click handler to open the snack bar so in the HTML button Matt button click handler is going to be open custom snag bar the text is going to show custom slag bar.

<button mat-button (click)="openSnackBar('Item deleted','undo')">
Delete
</button>
<button mat-button (click)="openCustomSnackBar('Item deleted','undo')">
Custom Snack Bar
</button>

And in the component class, we are going to define an open custom snack bar. From component we pass in the custom component as its first argument and then we pass in the duration of two seconds.

openCustomSnackBar(){
this.snackBar.openFromComponent(CustomSnackBarComponent, {duration:2000});
}
If we now go back to the the browser and click on show custom snack the bar we should have our orange colored notification custom snack bar 

Summary

All right that is pretty much about snack bars in angular material thank you guys for watching feel free to subscribe I'll see you guys in the next tutorial.


Post a Comment

0 Comments