Material UI Modal popup in Angular 14 | How to transfer data between components & popup | animation

hello friends welcome to nigeria techies this is our angular 14 tutorial so part of this video i am going to explain material ui model pop and this material uv model will have some interesting features like data transfer and also resizing we can apply the animation also so in this video i'm planning to cover each and every topic so let me go to the application okay this is my created application application in running mode and the first step is you how to install this material in our application so that stuff already i'm completed if you're not completed you have to install this package in our machine so once it's done we have to go to this component so the model pop-up is nothing but this dialog component don't lie so here you can see this apa and they have provided some examples also so we can get this html ts code all the information was available so we can use these things for our reference so let me start my changes from in the application first let me create one new component so ng generate component my component name is model popup okay great the popup is created now let me go to the common model of material ua so here i am going to include one model so the name is dialog so let me change the model name also mat dialog model so let me include in the export side also okay we have done now let me go to the up component so in the app component i am going to create one new button for opening this pop-up so let me check this button so the name is open popup okay this is done now i have to include one more model here mat button model it's not coming then we have to include manually so instead of this dialogue let me include a button okay fine so now it will come matte button model so let me see the output look like the pop-up is coming okay now the design also looks fine so in this button i am going to bind one up the event click and the function name is open popup so let me define the function here so in the app component already we have some function so let me create my new function for opening this pop-up so the function is created now let me go to the constructor here i am going to insert one class is mad dialogue so the injection is completed now let me go to the function here i am going to open this pop-up so this dot mat dialog dot open up here i need to provide the component name so our model pop-up component name is nothing but model pop-up only so we have done our changes let me try to open the pop-up okay great the pop-up is opened here i have to see one in small text like a model pop-up works and this pop-up size also very small so basically this text is coming from our model pop-up component so in this place whatever changes you have i mean the descent point of view you can apply it here so let me go to the example they have provided some default content so here let me remove the actions and this one also i have to remove it so instead of okay i am going to provide close for this one i am going to provide okay and also this math dialogue close directories for closing the pop-up so whatever data they have binded so let me remove it so we can apply our one changes so let me check the design how it's working see now hi what's your favorite animal and okay and collapse so let me change the design first welcome to nihira techies what's your favorite technology so let me give check okay this is enough and let me include one small style here so it will provide some good look and feel so instead of this matte button i'm going to use these classes because the look and feel is really good so one is primary and another one is one so we can check now okay the decent knowledge look feel better and now i'm going to increase the pop-up size okay for doing this one we can do it's from our ts file itself the first one is width so let me provide 60 percentage so you know the width of the pop-up is increased the similar way i am going to give the height also the height i am going to give 420 pixel so we have to pass in the single quartz see now the height of the pop-up also increased and now let me going to include this animation for including the animation we have two options ender animation duration so i am going to provide 1000 milliseconds see now the pop-up is opening very smoothly but when i'm closing time it's closed suddenly the same way we have the one more property exit animation duration so here also i'm going to provide 1000 milliseconds see now the pop-up is opened slightly and also if i'm trying to close so that i'm also it's closed very smoothly so let me provide 2000 see now it's opened so when i'm closing also it's closed very smoothly so this is all about the animation related changes now let me explain this data transfer so if you see here basically we have two components one is for our model component and another one is our parent component is called app component so basically we can do the data transfer in the two ways so one is transferring some data from our app component to our model and similar way we have to retrieve some data from our model pop-up window our app component so let me start from transferring data from app component to our model component so let me go to this open pop-up so in the open pop-up function is available in our app component only here i am going to pass one of the variable data so inside the data i am going to return an object here are techies and also the type tutorial now let me explain how to retrieve the data from our model components for returning the model components we have to do some injection here at inject so insert that match underscore dialog data so after that let me provide the data it should be public online and the variable name is nothing but data and its data type any okay so in this data basically i will get the values so let me try to take this value in the engine inside so let me include in the console so if you noted here in the console we don't have any value if i'm trying to open this pop-up the pop-up is opened at the same time i am able to get two values then here are texas and they type also tutorial okay so if i want bind the same values in our pop-up so in this model component i am going to have two fields so result dot name and also i am going to mention the type so result.type now let me declare this variable here any so whatever value comes in this data so let me add in here so we have done our changes let me verify it so if i'm opening this pop-up this attack is binded and also the tutorial and if i'm changing the name also from our app component i'm changing into texas and the type i am providing check so now i am trying to open this popup the same value is binded so now we have completed the data transfer between our app component to our model components so we passed some data and also we have binded in our model pop-up the next thing is we have to close the pop-up so already we have the option is called the closing popup so when i'm clicking this collapse button it's closed at the same time if i'm clicking this okay button it's not closed why because say in the collapse button we have added one directory it's called mad dialect clause okay so now let me close this pop-up using one of the function so let me provide the name as clause here i am not going to use this directory instead of that i am going to include one function the function name is close popup so let me define it and also in the constructor i'm going to inject something that is called matte dialect okay this is done now let me close it so this dart rough okay actually i need to pass the component here so basically it's expecting okay now it's fine so this rough data close that's it so now we can verify once again so i just open the pop-up so if i'm trying to click this clause so the pop-up get closed okay now my next plan is i how to pass some data from our component to our parent component so let me do that also so now what i'm going to do from this close function i'm going to pass some value closing form function okay i just passed the data now i need to get the values from our app component so what i'm going to do here i'm going to declare one variable constant pop up equal to so when i'm opening the popup i am able to get the same value in this variable so after that so popup dot after closed so let me subscribe it so when i'm subscribed i will get the values in this items so let me include in the console.log so now we can check let me insert so let me inspect and go to the console side first i'm opening this pop-up in the console i don't have any values so if i'm clicking this close button say i am able to get this closing from our function now once again i am going to open this pop-up and trying to close the pop-up using this collapse option so here i'm not getting any value you can see some empty value okay now let me show you how to we can pass the data from our directory itself so in the directory i'm going to use this property binding and also let me declare some values here close message equal to close to from directory so let me refresh we can start from our beginning so i just opened the popup if i'm clicking this okay button there is no change so if i'm clicking this clause pop-up i mean this collapse it's saying cola so it's saying closed from our directory and if i'm using this close button so i'm getting closing from function so as of now i just passed this string value the same way uh we have to pass some objectives also so instead of this one let me provide an object test user so if i'm clicking this collapse see now i am getting this object so the same way we have to pass any object or list whatever information you have so we can pass to our app component so this is all about our changes i hope you got some better idea about how to create the basic model pop-up and how to apply the animation and the resizing and also transferring data between the component pattern to our pop-up component and pop-up component into our parent component 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: 13,883

Keywords: material ui modal popup, material ui dialog, how to pass data in material ui modal popup, how to get data from material ui modal popup, Create Basic Modal Popup in materialUI, How to apply animation in angular UI, how to change the size of materialUI dialog, How to pass data popup close (Parent component to popup), How to pass data popup Open(Popup to Parent component), how to retrieve data from modal popup, how to pass object to modal popup in angular 14, nihira techiees

Id: RUA3nQxBMZ4

Length: 19min 8sec (1148 seconds)

Published: Wed Jul 20 2022