Learn Material Design in Angular. Snackbars

You may not be familiar with the term, Snackbar, but you most likely see them. Sometimes referred to as a toaster, snackbars inform users of a process that has been executed or will be executed.

Unlike dialogs, which are disruptive, snackbars are completely nondisruptive and they don’t require the user to interact with them. Snackbars can contain an action, but it’s totally optional.

Again, any actions on the snackbar should be trivial. By nature, a snackbar is transient and should disappear if the user doesn’t interact with it. A typical snackbar action might be Cancel or Dismiss.

Also learn Node js design patterns

You should only use one snackbar at a time. Snackbars should have a brief text label and an optional right aligned link. Never put any critical actions on a snackbar. For example, don’t use a snackbar to confirm a save. Icons don’t belong on a snackbar either. Let’s return to our app and add a snackbar. Returning to Visual Studio, let’s Command + P and open the customer’s module and we’re going to go ahead and add the snackbar material module. But before we do that, I see that I’ve got a component out of place and I like to keep things alphabetical.

So I’m going to use the Alt + up arrow key shortcut to move this up with the other components on line nine. And now below the MatRadioModule, I can import the MatSnackbarModule from at angular material snack dash bar. They treat snackbar as two words and then copy the snackbar module from line 18 and let’s go down to our angular material stuff on 33 and paste this at the end and save. And now let’s go ahead and just start the application. And now that I’ve done that, I’m going to Command + P and go to the customer new component dot HTML and let’s go ahead and open the undo snackbar instead of the dialog that we had before, we’re going to have two options in here.

I’m going to Command + P, go to the customer new component dot TS and now we need to import the snackbar injectable into our app. It works just like a dialog on line five. I’m going to import the MatSnackBar, two words, from angular material and I’ll save that service. And let’s go to our constructor on line 15 and go ahead and put a public snackbar, MatSnackBar. And let’s make another function above openRepDialog and we’re going to call this one.

What did I call this? Go back to the component, open undo snackbar. So let’s call it the same thing. Paste that in here. And now we can go ahead and create our snackbar. Ref by this dot snackbar dot open and there’s three parameters here. There’s the label, the action, and a config. So to start this out, let’s go ahead and create a label for this one and we’re going to say Customer saved. We’re just telling the user that the customer was saved. And for our action, let’s just go ahead and put undo.

If we want to give the user an undo option. I’m going to save that and let’s go back to our application and refresh the page and see how it looks. Customer slash new. And I want to write a line in the save button to use good material practices. So I’m going to go back to Visual Studio, and Command + P. And let’s open the customer new component dot css and let’s just add a Mat dash card, MatCard actions and let’s just display block text align right. There, now I’ve right aligned my button correctly.

Now let’s save and there’s my snackbar at the bottom. Currently it doesn’t do anything and I’m not really crazy about centering it on the bottom. So I’m going to add a couple configuration options here to make it like how I like it to be. So, let’s go back to Visual Studio Code. The customer new component dot TS, and inside the snackbar let’s specify a couple things here. First thing I want to do is let’s set a horizontal position and I’m going to use quotes and say End is where I’d like it to show up, and what about that undo action? How do we handle that? Well let’s go ahead and talk to the snackbar ref and let’s listen to the onAction and an empty action declaration.

Save that and let’s go ahead and say undo that save on line 30. Save that and this should be the snackbarRef not the snackbar on line 29. And right now I have an issue because I’m doing this.snackbarRef which is not correct, this is actually the local snackbarRef. I’ve saved that and lets go back to our application and if I hit this notice now the snackbar is right aligned and I have a few seconds to make a decision and if I undo, I undo that save. And if I didn’t that snackbar will dissolve and go away.

LEAVE A REPLY

Please enter your comment!
Please enter your name here