Angular Material Snackbar
In this article we'll take a look at snackbars in angular material, snackbar is basically like notifications that inform users of some operation that has been performed they appear for short time duration at the bottom of the screen and they don't require user input to disappear and at any point in time only one snackbar notification may be displayed.
let's begin by importing the module in material.module.ts
as always and add it to MaterialComponents[]
.
import { MatSnackBarModule } from "@angular/material";
const MaterialComponents = [
MatSnackBarModule,
]
Now let's see how it works in our HTML, let's add a button that will open the snackbar by handling the click event and calling a method also let's pass a string argument
<button mat-raised-button (click)="openSnackbar('Item Deleted')">
Show Snackbar
</button>
let's go to the class component in app.component.ts
and define that method to open a snackbar that's why we'll make use of a service which is MatSnackBar
from @angular/material
so go ahead and import it and inject it in the constructor.
Now create the openSnackbar
that accepts a message and within the method body we use the service instance and call the open()
method passing in the message.
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);
}
}
If you save the files and take a look at the browser we should have a button and then I click on the buttons the snackbar should pop up at the bottom of the screen with the message "Item Deleted".
So we have seen how to make a basic snackbar in angular material working as expected but we can customize more our snackbar.
angular material snackbar action
We can specify an action for a snackbar, the action is specified as the second argument to the open
method on the service instance to keep the openSnackbar method more generic I will pass the action parameter as well from the click handler so in the HTML the second parameter is going to be the string Dismiss.
<button mat-raised-button (click)="openSnackbar('Item Deleted', 'Dismiss')">
Show Snackbar
</button>
In the component class the method will now take a second parameter which is action and do the same to the open method.
openSnackbar(message, action) {
this.snackBar.open(message, action);
}
If you take a look at the browser and click on Show Snackbar button the snackbar opens and you can see the message and the action Dismiss, when I click on this action by default it closes the snackbar, a typical use case for this is usually to undo an operation for example let me rename the button to Delete and the action to Undo .
<button mat-raised-button (click)="openSnackbar('Item Deleted', 'Undo')">
Delete
</button>
but when the user clicks on this action we want to execute some code that will undo the operation the way we are alerted when the snackbar is dismissed or the action is clicked is by using observables so in the component class we are going to start off by sorting a reference to the snackbar that has been opened.
openSnackbar(message, action) {
let snackBarRef = this.snackBar.open(message, action);
snackBarRef.afterDismissed().subscribe(() => {
console.log("The snackbar is dismissed");
});
snackBarRef.onAction().subscribe(() => {
console.log("The snackbar action was triggered!");
})
}
If you save the files and go back to the browser and open the console click on Delete button the snackbar pops up click on the action button we can see log statements in the console.
In this example we've just log statements but you can have any code to execute when dismissing or when the action is triggered.
angular material snackbar duration
There is also a third parameter which accepts some configuration the one which would be used mostly is the duration property which indicates the length of time in milliseconds to wait before automatically dismissing the snackbar, so let's add an object with the property duration and set it to 2000 which is 2 seconds.
openSnackbar(message, action) {
let snackBarRef = this.snackBar.open(message, action, {duration: 2000});
snackBarRef.afterDismissed().subscribe(() => {
console.log("The snackbar is dismissed");
});
snackBarRef.onAction().subscribe(() => {
console.log("The snackbar action was triggered!");
});
}
If you save the file and go back to the browser click on Delete button the snackbar pops up but after 2 seconds it automatically dismisses and in console log you can see the log statement.
so the the after dismissed part of the code was executed when the snackbar was dismissed so when you have an action you can use
onAction
observable and when and you when you don't have an action but want to execute some code when the snackbar is dismissed place that code in afterDismissed
observable.
angular material custom snackbar component
As the name indicate the open from the component method creates and opens a snackbar with a custom component for the content let's take a look at this example.
In the existing component class which is app.component.ts
I'm going to quickly copy paste another component you could create the component in a separate folder but simplicity I have it right here, as you can see the template is just a span tag with color set to orange now in the app.module.ts
I'll add the component we've created in declarations array and add to another property called entryComponents
here is the code for each file.
app.component.ts
@Component({
selector: "custom-snackbar",
template: "<span style='color: orange'>Custom Snackbar</span>",
})
export class CustomSnackBarComponent{}
app.module.ts
import { AppComponent, CustomSnackBarComponent } from "./app.component";
@NgModule({
declarations: [AppComponent, CustomSnackBarComponent],
entryComponents: [CustomSnackBarComponent],
.....
})
All right now that we have a component to display as custom content let's a button and a click handler to open this customized snackbar so in the HTML.
<button mat-raised-button (click)="openCustomSnackbar()">
Show Custom Snackbar
</button>
In the component class AppComponent
we're going to define openCustomSnackbar
method.
openCustomSnackbar() {
this.snackBar.openFromComponent(CustomSnackBarComponent, {
duration: 2000
});
}
If you save the files and go back to the browser and click on Show Custom Snackbar button we should have our orange colored notification.
All right this is pretty much about snackbar in angular material if you have other issues or any misunderstanding please consider to visit the official documentation for angular material snackbar.
-
1. Angular Material - Getting Started
-
2. Angular Material - Material Module
-
3. Angular Material - Typography
-
4. Angular Material - Buttons
-
5. Angular Material Button Toggle
-
6. Angular Material Icons
-
7. Angular Material Badges
-
8. Angular Material Progress Spinner
-
9. Angular Material Navbar
-
10. Angular Material Sidenav
-
11. Angular Material Menu
-
12. Angular Material List
-
13. Angular Material Grid List
-
14. Angular Material Expansion Panel
-
15. Angular Material Cards
-
16. Angular Material Tabs
-
17. Angular Material Stepper
-
18. Angular Material Input
-
19. Angular Material Select
-
20. Angular Material Autocomplete
-
21. Angular Material Checkbox & Radio Button
-
22. Angular Material Date Picker
-
23. Angular Material Tooltip
-
24. Angular Material Snackbar
-
25. Angular Material Dialog
-
26. Angular Material Data Table
-
27. Angular Material Exploring Data Table
-
28. Angular Material Data table Filtering
-
29. Angular Material Data Table Sorting
-
30. Angular Material Data Table Pagination
-
31. Angular Material Virtual Scrolling