Angular Modal Popup Using Bootstrap | angular tutorial | angular tutorial for beginners | Bootstrap

so welcome to Learning Partner in this video we are going to see how we install the bootstrap in our angular application and how we use the model popups okay so first thing is like we need to install the bootstraps so if you go to the npm and simply search the bootstrap so we get this right and this is the command by which we install the bootstrap so the latest version is 5.0.1 so let's just copy this and let's go to the project open the terminal and paste this command and click enter so what it will does it will download the particular version that is 5.0.1 from the npm and keep it in our node model folder okay so you can see it is it has added so if I expand this let me just refresh if we go to bootstrap okay so here you can see we have got the bootstrap installed this is the first step first we have to install that particular package using this command okay next thing is we need to add that link like CSS and the JS whatever we are going to use from the bootstrap in the angular.json in the style section and the script section okay so let me just copy paste this okay this is nothing but just the path we have in this particular folder okay this is the first thing you need to do let's save and let's run the application in Gs okay so application is successfully compiled let's load the application so when we run by default it will run on the localhost photo double zero okay so let's open the user page yeah so in the user page let's try to implement the model popup so that is users and let's see the UI how it is yeah so before this rule let's add a row or well button we need okay so we have a simply open model open model button now on click of this we have to open the model so if you can see the bootstrap once I click on this you can see this model popup is getting opening okay so I just need a simple model pop-up code that is nothing but just a simple div with the bunch of classes so this I have to put in my page anywhere but basically no just to stand Follow The Standard Process we keep it all the models at the bottom of the page okay so this is our model popup now next thing is to if if I show you this if I inspect this just pay attention to the CSS it has let me just make it in line okay so here you can see display block is there and if I close it so you can see display none CSS is getting applied to this particular div if I open this see again display block is there so it's just a simple CSS when we click on the open model that particular div is having this we are adding the CSS display block which will uh allow the model pop-up to open okay and if we make it none it will get hidden so that's same thing we have to do so for that let me just yeah so on click of this button what we need to do first we need to write the click event open model now we need to create this function okay I have so much of code here but let me get rid of that okay so now here what we have to do first we have to select this particular div using this ID using JavaScript okay so that will be document dot gate element by ID then we need to provide the ID of that model view that is my model so this will go over here so up till now here we have selected that particular view then we need to add the style dot display is equal to block but now since angular 15 it it will every time ask you to check for the null so let me just hold constant model due and we need to store this thing over here and then we need to add a null check like if model is not null whenever we are selecting any using document.selector so it will ask us to do this we need to add it here and instead of that document.get element by ID we can use the variable because we have stored the reference of this particular div into this variable right same thing let me copy paste and we need another event that will be close model okay now in closed case we just have to add that other CSS that is none and I need to call this function in on this button click here also and same thing will go on the footer button also so let's just test it now okay if I click on open model you can see model pop-up is opening and if I click on the close same model problem is getting closed also let's see the CSS so this is our Duo so you can see currently this div has the CSA display none but once I click on it you can see display block is there and we get the model visible if I click on close you can see it is displayed on so with simply that two functions we can achieve the model perform opening and closing then your content will be here in the model body like let's say user form list whatever things you have to show okay this is the simple code which you need to open and close the bootstrap model okay that of the first way another way is in angular.json you need to add the JS also okay so let me just add the Js it's not mandatory to add the JS unless you are you going to use some functionality of from the bootstrap.js okay so currently I have added the script if whatever the changes you are doing to angular.json it is mandatory to run the application again otherwise it won't take the effect okay so whenever we do the changes to angular rotation you should run the application again means compile okay now after adding the scripts script to your script section next thing is like you don't need this click event okay let me just make it call three and I will just create one more button that will be without the click event we just need some properties that will be data toggle and our Target Model that is the ID of our view it will go over here [Music] open model let's just limited to okay now if I save it now if you can see on this button click I don't have the click event but still that model will open let's see yeah you can see and it is getting closed also if I remove the close button let's try to remove the close button from the bottom but we have data dismiss model so it will close okay so you can see without using or writing the event also we can achieve but there might be some need when you open the model you need to call some API when you close the model you need to call some API so in that case you can go for the events like this and write your custom code to add the CSS but if you don't have any such functionality you can just simply add the jQuery previously it was uh needed that you need to add the jQuery also but bootstrap min.js along with version 5 is purely built with vanilla Jesus means only JavaScript okay so you now you don't need the jQuery okay so with simple this these are the two ways first writing the uh on button you need to call the event in the event you just need to select that model and add a dynamic CSS that display block to open the model and display none to hide it otherwise you just need a simply button with these two properties and here you need to provide the ID of the model this ID will go over here okay and remaining code you will have the same so I hope you have liked the video please do like and subscribe thank you

Channel: LEARNING PARTNER

Views: 25,712

Keywords: how to open bootstrap modal, open bootstrap modal in angular, bootstrap modal popup, open bootstrap modal angular, bootstrap modal popup in angular, open modal on button click in angular, angular bootstrap modal popup, angular modal popup, install bootstrap in angular, angular install bootstrap, how to install bootstrap angular, how to use bootstrap in angular, angular tutorial, angular, angular tutorial for beginners, angular interview questions and answers, angular project

Id: LnBo9dn70MY

Length: 9min 41sec (581 seconds)

Published: Mon Feb 27 2023