MAT-DIALOG | Modal popup in angular material UI (Data transfer + Reactive forms) | Nihira Techiees

and in this video Let Me Explain how to implement model pop-up in angular application using material UV components so the component I'm going to use this matte dialog and also I'm planning to cover the below topics the first one is how to transfer the data to the components using this matte dialog component and the second one is kind of reactive forms example so I am planning to complete the first time to put request okay now let me go to my application we can start our implementation one by one so the first thing is we have to import the required model so in our material way model the control is dialog and the model is matte dialog model okay okay we have completed the first step next let me get component okay the component is created here we can include one question tag okay and the direct to matte dialog title so let me save this one and next we can have one due tag and the directory is match dialog content okay then I'm going to have one more due tag this is for having your buttons and the directory name is matte dialog action okay it should be actions okay so we can save this one and here let me provide like and let me see the current output of our application okay so we can use this table screen okay it is kind of user information so there I am going to include one add button so when I am clicking the button so we can open our pop-up that's my plan so next in our table component we can have one button okay add user and this is the matte waste button so color we can give primary okay we have the button let me move this into the right side okay okay this is somewhat fine and the next thing is in our TS file so in this Constructor let me inject the matte dialog okay so then we can create one function open pop-up okay so here this dot dialog open so inside that we have to call our component okay so our component name is pop-up component and additional parameters we can include it here so the first one is width we can give 60 percentage and the height if required we can give some values so let me provide 400 pixel okay we can save this one and in our add button we can bind this event so when I'm clicking this one see our pop-up is opened and we have the only text welcome to Nikita keys and the next two thing is we have to close this pop-up okay for closing the pop-up we can write the custom function and also we have one direct you so let me show you the both things so in this action side on this close and the next two button I can give cancel okay both are mat raised button and the color we can give one and the next one I make you like a percent and this closed button we can bind on the event close bubble let me Define this one and here also we can have the Constructor so here I am going to inject the matte dialog graph and our pop-up component okay so in this function so let me save this one see the output we have the two buttons so by name clicking this close button see now our pop-up is closed and the second option I said we can use the directive and the directory name is matte dialog Clause okay so that actually we can use it here so let me save this one and also the height we can remove see it is closed even close is working and also our cancel so both the buttons are working okay and the second thing is transferring the data so from our table component to our pop-up component we can pass the data the similar way we can get some data from our pop-up component to our table components both the things we can do so first we can pass the data from our parent component to child so that means our table to our pop-up component so for that I'm going to use this data option and in this object we can pass a number of values so here I am going to pass the title okay user edit so this is the value I am passing here and next in our pop-up component we have to get this data so in this Constructor okay we can inject the matte dialog data to inject math underscore dialogue data next in our component let me declare one variable input data any and here we can implement the hook is on it so in this implementation let me take this data and we can set to our input data okay so next let me bind this value in our component so instead of the hard code value we need here at the case let me remove this one we can use the inner position concept input data it is the object and the parameter name is title I believe yeah so we can save this one see the user edit so now we are able to pass the data the similar way when I'm closing this button we can pass some data to our parent components okay so let me close this one so first we can consider this function okay so the function actually we have defined here so in this close button we can pass some data closed using function so this is the text time passing next in our table component bar pop-up culture using this object we can say after it is closed let me subscribe this one so whatever data is coming I can get in that console see now if I'm closing this one see I am getting the message closed using the function the same time frame clicking this one using the direct View and not getting any value so the thing is using directory also we can pass the data so let me tell you here I am going to declare one more variable closed so let me copy this one and in this director let me use the property binding so let me refresh the screen see now if I'm clicking this cancel button closed using director if I'm clicking this close using the function okay okay these are the basic properties in our matte dialog component and let me tell you two more properties first one is the Ender animation duration thousand milliseconds so you know if I'm clicking the bubble city is coming slowly it is a kind of Animation thing but when I'm closing it is closed immediately that closing also we can apply the animation exit animation duration and we have to provide the second so let me provide the same thousand milliseconds see it is opened slowly and the closing also it is slowly disclosed okay so now we have seen around five properties the first one is width and high Tire removed and their animation duration exit animation duration and transferring the data using this data option okay so next what I'm going to do uh let me do some designate here and here we can apply the reactive forms okay so inside this matte dialog content we can have Allah for controls one by one so here I'm going to use this matte form field matte input okay and the mat label name email phone and Status only so there are just four Fields okay the code is the auto generated one so name email phone and the final one is the matte checkbox let me save this one we can command one of the button so instead of that I'm going to include one more new button and the text is saved so let me save this one okay we are getting some error so it should be labeled okay see now all the controls are coming in the same line so here I'm going to include one custom class so let me take the class from our form design component we can include in our form component also Amino pop-up commoner also it is somewhat better and if you want reduce the width also it is possible so already have provided 50 percentage so let me change this into 40 percentage very simple form design okay and next let me Define our reactive firms so here we can inject our farm Builder burst so this dot Builder and group so feels the first one is name so this dot Builder control the default value CMT so here I'm not going to take much time we can complete very quickly because the main intention of the video is all about the pop-up for this one is for recycle so the default value is true so next let me copy this one and another pop-up so let me include one Farm control I mean on Farm element so there I'm going to have this form group and one submit event the function name is save user and let me Define it here and let me cut to our form we can move at the end so whatever content we have that actually we have moved into the form that's it okay the design point of view we don't have an issue next in the all the controls we can use the form control name first one is name and the second one is email and the third one is phone okay so the final one is status so let me save this one and in the save button we can include one cancel that log distort my firm that value okay test t18.com and some numbers so if I'm clicking save see we are able to get all the values okay so next what I'm going to do in our service side we can depend on post function so already we have this uh get method save customer we can remove all these items in and this is the post method we are not going to return anything and it is having one more parameter that is our data that's it and here I can create one more get method so the return type everything we can remove get customer by code okay these two are the function first one is for the save and the second one is for retrieving the data that's it so next let me go to my pop-up component so here what I'm going to do let me call our services I believe it is not injected yeah let me inject this one so this dot service save customer and the value so let me subscribe this one so once it is saved uh we have to close this pop-up that's it and the pop-up is closed we have to refresh our data so the data is loaded in our table component so they are what we supposed to do so here already we have this function okay so let me create one more new function load customer so whatever service call is there we can move to our load customer so first in this Constructor we are calling and the same function we can call once our pop-up is closed okay now let me create one more newer card okay now let me create one new record our netting.com and some numbers okay so once I'm clicked see the pop-up is closed and see we how the count is increased now it is the total record so let me create one more new record see the count is 13. so if I'm selected here okay see we are we have the newly created records okay so that means our post method is working and next what I'm going to do when I'm clicking this edit button so I'm planning to open the same pop-up we can load the existing data so that is my plan for doing this implementation first let me go to my pop-up component okay so let me refresh this one and here we can have one function set pop-up data and it is and the input is code and here we can call our service and the method name is get customer by code okay and we are we can pass this input as the code let me subscribe this one and here we can declare one more variable any so let me format this one so after that we can set the values okay so this dot microphone set value so this is the kind of object first one is name so the value is name the similar way email so this dot edit data dot email now phone and finally status so this Dot edit data that status that's it so let me save this one and from our parent components so already we have this edit button right so there we can include one function the edit customer sorry so the click event and edit customer and here we can pass this element data ID so let me Define this function see this console I am able to get this ID okay so next what we can do so in this pop-up we can pass two parameters the first one is code and the second one is title so in this data we are passing this title and we can pass the code also there are two values I am passed it here and in our edit customer function we can call this open photo function first time passing the score and the title is related customer okay it means format this one yes but at the same way I'm going to have ADD customer we can call the same pop-up function so instead of the code we can give default value 0 and the title is add a customer okay and another button so already I'm binded as the open pop-up so instead of that we can use this add a customer and again let me get back to our pop-up site so here I am checking one condition this dot input data dot code 0. pearls greater than zero if this is the scenario I can call this function code so let me save this one see now so if I'm clicking this Janus so we have loaded all the records okay so if I'm trying with some other records okay the details are loaded fine and the similar way from clicking this add button the GMT pop-up is opened okay so this is the way our matte dialog control is working in our angular application so still if you have any outside 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: 33,364

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: zUp3Unc-ynM

Length: 27min 52sec (1672 seconds)

Published: Tue Apr 25 2023