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

Channel: Codevolution

Views: 123,951

Keywords: Codevolution, Angular, Angular Material, Angular Material Tutorial, Angular Material Tutorial for Beginners, Angular Material for Beginners, Dialog, Dialog in Angular Material, Angular Material Dialog

Id: lrVpUVydZwM

Length: 9min 35sec (575 seconds)

Published: Mon Apr 15 2019