Angular Material Components Course Overview

 Install and Configure a Project with Angular Material

Use the Angular Material Sidenav Component

Create an Extended Header Using Angular Material Toolbars

Utilize Material Design Icons for App Icons and Buttons

Manage User Input with Angular Material Inputs

Manage Loading with Angular Material Progress Bars and Spinners

Create Tabbed Interfaces using Angular Material Tabs

Manage Date Selection with the Angular Material Datepicker


 Manage Notifications with the Angular Material Snackbar

Manage Application Dialogs with the Angular Material Dialog Component

Manage Tabular Data with the Angular Material Datatable Component

Create and Manage Themes with Angular Material Theming

Structure Angular Apps with Angular Material Components

This lesson demonstrates how to handle notifications and alerts using the snackbar component with Angular Material. We will cover snackbar configuration options and creating custom snackbar templates with dynamic data.

Lecturer: [00:00] to get started using Material Design snackbars, you need to include the Mat Snackbar module in your NG module imports. Next, you need to import Snackbar service and inject it in its component in which you wish to display Snackbar alerts.

[00:10] To display a Snackbar alert, you can call Snackbar.open, passing it the message you wish to display. Our Snackbar now appears on the screen but doesn't dismiss.

[00:20] To allow the user to dismiss the Snackbar manually, you can add a second parameter, which is the text to display on the dismiss button. The Snackbar can now be dismissed by clicking the action button.

[00:29] If you prefer for the Snackbar to auto-dismiss after a certain duration, you can utilize the third parameter, which contains configuration options. One of these options is duration, which is the time before dismissal in milliseconds. For now, we're going to set this to one second.

[00:43] If you want to rely entirely on auto-dismissal, you can set the second parameter to no. This will remove the dismissal action button. If you prefer for your message to be at the top of the screen rather than the bottom, you can utilize the vertical position property, setting it to top.

[00:57] There may be times you want to respond to dismissal or manual closing of a Snackbar. To accommodate this, you can utilize the after dismiss and on action observables exposed through the Snackbar reference. We'll start by subscribing to dismiss event, logging a message. When the Snackbar closes after three seconds, we can see our message is logged.

[01:16] If you want to respond instead to the user manually closing the Snackbar, you can subscribe to the on action observable. When we refresh and open our Snackbar and then manually close it, you can see the after action message is now logged.

[01:29] It's worth noting that if you subscribe to both, dismissal will be called even if the user manually closes the Snackbar. We can see now that both the after action and after dismiss messages are logged in succession. Remember that since after dismiss our action is an observable, you can use an operator like merge map to make a request off this action.

[01:45] The final thing to be aware with Snackbar is if you want to make a custom template with dynamic data, to do this, you can switch Snackbar.open to Snackbar.open from component. The first parameter will then be your custom component. The second parameter is your config settings. If you want to supply data, this can be done through the data config setting.

[01:59] For demo, we're just going to pass on the message we received from our input to our Snackbar. To access this custom message, we need to import the Mat Snackbar data token into the component that we supplied. We can then inject it and access its value in our template. Since this is a dynamic component, we also need to add it to our module's bootstrapper A.

[02:17] We can now type in a custom message. It will be displayed on our Snackbar...

Course

Structure Angular Apps with Angular Material Components

Manage Notifications with the Angular Material Snackbar

Share this video with your friends