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.