Learn Angular : Modal Pop Up | Angular Material | With Source Code

so i already have an angular application up and running here uh it's a bare-bone uh angular application which has it already has angular material installed and a bootstrap installed so i won't be going into the details of how to install material and bootstrap into your angle project you can refer one of my uh we'll start by importing uh matte dialog module in your angular project so you all you need to do is you go to your uh you just need to go to your app.module.ps file and import my dialog module there uh from angular okay so once you have the matte dialog module installed or imported once you have the man dialog module imported it's added to the import survey here now you are going to use uh mad dialogue module here so in order to use the dialog module we will be showing uh we'll be showing one component like we'll be showing some data inside the pop-up so for that thing we'll create a create a new angular component let's name the component like uh nc [Music] g component uh pop-up so that'll create a new component which will be called maybe a pop-up component as you can see here pop-up so uh this component will be shown inside the pop-up inside the model dialog so we just add some fancy text for the timing let's say it's to welcome maybe a button also okay so once you have this uh pop component in place uh we'll go to the app comp you go with our main component and uh we'll create a reference to the dialog start by importing matte dialog inside your app component uh once you have uh metallic here you can you need to create an instance of my dialog here create a private instance of my dialog private uh dialog reference my dialogue okay so once you have what define a function so we can create a private function called to like open dialog in scientists you can use the dialog reference to open the component so our component name is pop-up component just add it here okay i just save it and call this open dialogue thing inside the app so inside the app component is let's add one button click to open pop-up okay and on click of this thing send that method okay now save it and start the application open open the application you will be able to see the button just click on the button and you should see the pop-up component inside a mac dialog so this is how you use matte dialog inside your angular application now let's see uh a bit more complex cases where you need to pass data to your map dialog for passing the data you'll be you you'll require something called mad dialogue data so what i'll do is i'll go to the pop-up here and create an instance of inject my dialog data and find something available called data variable so now uh when we will be able to pass data using mat dialog data so now what you can do is we can pass the data uh from our main component to this component that i'll just go to the app component here and here we can pass the data the second parameter define something called data and add an object here let's say name uh [Music] okay and go to your component here and define something called first name and inside the constructor again you define something called we can set the first name as uh data dot ravi passing from here data dot uh name so it will be data name okay and we can display it here maybe um first name uh and also this let's add some class to the sing btn and btn primary should be good similarly let's add a class here also just to make it look a bit better we are using okay now save it all reload the application click to open the pop-up and as you can see it's a welcome sample so now you know how to pass data from your parent component to the model dialogue pop-up so i hope you find this video useful do let me know uh your thoughts or like any comments like anything related to this video or any feature requests or like video requests or anything in the in the video comments thanks for watching

Channel: CodeHandbook

Views: 72,977

Keywords: Modal PopUp in Angular, Angular Material Modal Popup

Id: FThtv9iorao

Length: 6min 37sec (397 seconds)

Published: Mon Apr 26 2021