Angular Material Tutorial - 25 - Snackbar

in this video let's take a look at snack

bars and 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 let's begin by importing the

module so in material dot module dot es

import mat snack bar module and added to

the material array 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 be show snack bar so we now

have a button that called the open snack

bar 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 inject it in the constructor

constructor private

snack bar of type mad snack bar now we

can define the open snack bar method

which will actually 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

instance is this dot snag bar and we

call open passing in the message

if we 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

argument to the open method on 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

parameter is going to be the string

dismiss in the component class the

method will now take a second parameter

which is action and the same is passed

to the open method

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

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 observables so in

the component class we are going to

start off by storing a reference to the

snack bar that has been opened select

snack bar F is equal to this dot snack

bar dot open now using this reference we

can subscribe to the after dismissed or

on action observables so the first one

is after dismissed it's a snack bar

sorry

snack bar F dot after dismissed dot

subscribe and we are going to basically

log the statement the snack bar

was dismissed similarly we also have

snack bar F dot on action dot subscribe

and over here we are going to log the

statement the slack bar action was

triggered if we now go back to 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

bar was dismissed I just have console

log statements but you can have the code

to undo the deletion so we have the

message and the action which are passed

to the open method there is also a third

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 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

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 is dismissed place

that code and the after dismissed

observable the last point to discuss is

about the open from component method as

the name indicates the open from

component method creates and opens a

snag bar with a custom component for the

content let's take a look at an example

in the existing component class which is

app component dot es I'm going to

quickly copy paste another component

now you could create the component in a

separate folder but for simplicity I

have it right here as you can see the

template is a span tag with 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

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 be show custom slag bar

and in the component class we are going

to define open custom snack bar and this

is basically going to be this dot snag

bar dot open from component we pass in

the custom component as its first

argument and then we pass in duration of

two seconds if we now go back to the

browser and click on show custom snack

bar we should have our orange colored

notification custom snack bar 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 video