Angular Material Tutorial - 26 - Dialog

alright guys in this video we are going

to take a look at dialogues in angular

material a dialogue is a type of modal

window that appears in front of the app

content to provide information or ask

for information the usage of a dialog is

very similar to that of the snack bar

component we looked at in the last video

so this video should be pretty

straightforward if you've understood how

a snack bar works alright let's get

started

first step import mat dialogue module

and add it to the material array next in

the HTML create a button that can open

the dialogue so button add the attribute

mat rais'd button add a click handler

which is open dialogue and then the

button text is going to be open dialogue

now let's define the open dialogue

method

to be able to actually open the dialogue

we need the Matt dialog service so

import Matt dialog from angular slash

material after importing we need to

inject it

so constructor let's go with public

dialog of type Matt dialog and then we

can define the open dialogue method

within the body we are going to have

this dot dialogue dot open and the open

method on dialogue accepts two

parameters the first parameter is a

component and the second parameter is

optional configuration to pass in a

component parameter let's first create

it so in the terminal we use angular CLI

and run the command ng G for generate C

for component and the name of the

component which is going to be dialogue

- example and I'm also going to skip the

test files the command creates a folder

for the component and adds it to the app

module but a component that is used for

a dialogue also has to be included in

the entry components array so over here

dialog example component now we can pass

this component as our parameter so nav

dot component es this dot dialogue dot

open and the first parameter is going to

be dialog example component

all right let's go back to the browser

and test this out if I click on the

button a dialog pops up with the content

dialog example works and this is the

HTML corresponding to our dialog example

component right now we just have a

paragraph tag but there are several

directives meant specifically to

structure the dialogue content let's use

them instead so envious code I'm going

to open the file dialog example dot HTML

and first we specify a dialogue title

using the mat dialogue title directive

so I'm going to add an h2 tag and the

directive is going to be mat dialogue

title this is going to be session

timeout next for the content we have mat

dialogue content so this is going to be

Matt dialogue content and the text is

going to be you will be logged out due

to inactivity next for the dialogue

action we have the mat dialogue actions

let's create two buttons one to stay

signed in and want to log out so keep me

logged in or log out now on both these

buttons if you want the click event to

close the dialogue we need to add the

mat dialogue close directive so on both

the buttons mat dialogue close

alright let's test this out if you go

back to the browser and I click on the

button we have the model with the title

content and the buttons when I click the

button it closes the dialogue as well

now we have two buttons intended for

different purposes how would we know

whether to log the user out or keep them

signed in when the dialog closes on the

button click we can do that using the

after closed observable which

conveniently returns a result

so back in vs code in the component

class first create a reference to the

dialogue so let dialogue ref is going to

be this dot dialogue dot open now we can

subscribe to the observable dialogue ref

dot after closed dot subscribe we get a

result and let's simply log that to the

console dialog result is result finally

we assign a value to the mat dialogue

closed directive which is accessed as

the result so in the HTML for the

dialogue on keep me logged in button mat

dialogue closed

is going to be equal to true for the

first case and false for logout let's go

back to the browser and test this out

I'm going to open the console click on

open dialogue and click on keep me

logged in you can see that it says

dialogue result true and click on log

out

it says dialogue result false so in the

subscription method you can have the

code that checks for the result if

result is equal to true keep them signed

in and if result is equal to false log

the final point to discuss with

dialogues is passing in the data to the

dialogue component and there are a

couple of steps so let's go over each of

them the first step specify the data as

the second parameter to the dialogue

open method so this is going to be an

object the key is going to be data which

in turn is going to be an object I'm

going to pass a name called vishwas so

this is the second argument to the open

method next open the component class for

the dialogue example component so

dialogue example component dot TS to

access the data in the dialogue

component we have to use the mat

dialogue data injection token so first

import inject from angular slash core

next import mat dialogue data from

angular slash material and then we

inject it in the constructor so

constructor is going to be at inject and

we are injecting mat dialogue data and

then we say public data of type ami so

basically we are now making the dialogue

component capable of receiving any type

of data now in the dialogue component

HTML we can simply interpolate the data

object so in math dialogue content I'm

going to add high data dot name if you

now go back to the browser and click on

open dialogue you can see that content

says Huayra choise you will be logged

out due to inactivity so we are able to

pass data to the dialogue component now

if you want to specify height and width

for the dialogue it can be passed into

the configuration object there are a

bunch of properties you can use

based on your requirement so I leave

that for you guys to explore browse the

API tab in the documentation and you

will find everything you need alright I

hope you now have a good understanding

of how to work with dialogues in angular

material thank you guys for watching

don't forget to subscribe and from the

next video let's get started with data

tables