MAT-DIALOG | Multiple Modal popup in same component |angular material UI | Nihira Techiees

Hello friends welcome to my channel hiratakis and this is our angular 15 material away tutorial and in this video we can see one of the concept using my dialog component so already I have created one separate video using this matte dialog so this is the continuation of the video and this application created based on my last video okay if you want to watch that video I will share that link in the description you have to watch it and here this add user and also the edit we have implemented this model pop-up using this smart dialog component so similarly I am going to implement one more functionality so that is actually detail okay I am going to include one more button here so so once I'm click the button I'm going to show the individual customer information in the pop-up okay first of all let me tell you why I'm creating this video so I got on request so can we use multiple pop-up in the same page yes obviously we can use for explaining this concept only I am going to include this detail functionality okay so now let me start the implementation for this grid and everything it is loaded from our table component if you are following my material away tutorial you will know so in this table component I am going to include one more button okay so we can provide the name as detail and the function is detailed customer so let me copy this function and we can create it here we can duplicate the function and we can rename it okay and if you checked this function we are calling one more function it's called open pop-up so in this open pop-up we have to input one is title and another is the code so here we are using this dialog so dialog basically we are injected in our Constructor so dialogue is nothing but our matte dialog okay so it's having the open punctuality so in this open functionality we are passing one of the component and additionally we have some properties like a width and animation and if frequent we have to pass some data also for the current scenario we are passing this title and code okay so this is all about the opening pop-up and also once you are closing the pop-up if you want to execute some other functionalities or else if you want get some data so we can use this area okay so as of now we have to open the pop-up only so the first thing is we need one more component okay so let me create a new component here NG generate component so we are going to generate inside the full draft component and our common name is user detail okay okay we have created the command here I am going to include one HD tag new sub details okay so now in our table component I am going to alter this open popup okay already we have two parameters I am going to include one more parameter that is component in so now instead of the pop-up command we can pass this value and also in our edit customer we can pass our pop-up components so similarly in our add customer also so in this detailed customer function we can use the user detail commands Okay so now there is no issue so let me save this one we can verify whether it is working or not so there is no error so already we have this edit function so similarly we have this detail see so the pop-up is open as of now we have this user details only so the next thing is uh we are passing the code right so the customer code we are passing So based on the code we can fetch the user or customer details and we have to display in our pop-up okay so let me go back to our component and here we can create one Constructor so here we can inject matte dialect data using this inject match dialog data so similarly we can inject the matte dialog ref also so that is used for closing or pop-up this one okay and here we can pass our Command that's it so the basic things we have done so next we can implement NG awning hook so here we have to get our code value so that actually passed a from our table component so I'm going to declare one variable here so this dot input data c equal to data next I am checking whether it is the code have the value so in this past scenario we can call our service so before that let me inject the service also private service and our service name is master service okay and here so let me call our services get customer by code and here we can pass this code value so let me subscribe this one I'm declaring one more parameter so here we can assign so whatever data we are getting from our services okay so let me format this one So currently we have the data now let me focus on the designing part for the designing purpose let me take the reference from our pop-up component so we can copy the complete code after that we can alter it so the first thing this form is not required at the end also we can remove it and this content area we can remove all the items so input data so let me verify the variable name yeah so that also fine and here this and this save button is not required and also we have to Define this close pop-up function okay so using our Mac dialect ref I'm just closing this pop-up okay so if you want to pass some data here we can pass so as of now let me provide us the empty value or else we can give from closing from detail so let me see the output once again see now the customer detail and also the close button is coming so next we can bind all the values one by one I am going to use phone h2 tag so the customer name we can use one bold attack and then let me use the interpolation and our variable name is custody data dot name so if I'm checking now see I am getting the customer name Janus so if I'm clicking this complete yeah the accomplish is coming so I am going to include the other fields also okay totally five Fields I have included customer email phone and what are the other information we are having yeah Status and code maybe we can provide the up to status okay Casino see if I'm taking some other records with you okay our detail functionality is completed so using this way we can open multiple pop-up in the same component itself okay and also we can apply lot of customization so as of now this function uh we are passed our common and also a parameter similarly for the other properties such as with the height animation it's all about the requirement okay so now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 1,901

Keywords: Angular Material Tutorial, Angular 15 - Material UI Tutorial, Material UI Course for begginers, assign values to reactive forms, mat-dialog component in angular material ui, modal popup design in angular material UI, mat-dialog custom close functions, angular material ui modal popup with animations, how to transfer data in angular mat-dialog, angular modal popup with reactive forms, how to get values in angular material modal popup, nihira techiees

Id: PE0lsv2gTug

Length: 11min 23sec (683 seconds)

Published: Fri May 26 2023