Angular CRUD with Web API Tutorial Part #4 - Install Bootstrap in Angular 9 Visual Studio Code

hi friends welcome to our tutorials we are continuing with our angular grad tutorial series and this is the part 4 of that series in this particular series we are trying to build a feature module called products for e-commerce website imagine that we already have an established e-commerce site and a project application repo so how do you go about creating a new feature module with all the crud application crud includes create read update delete and much much more welcome back friends my name is sridhar i am here to share my knowledge with you on modern web technology stacks and frameworks we will also learn about mongodb mysql and other apis and endpoints i'm also here to learn from you all so during the course of this tutorial series where you are building your own feature modules for your applications i i cannot i cannot tell you how interested and exciting it is to learn what you are building so during the course of this tutorial series if you have any doubts any queries just drop in the comments section below i will try and help you as much as i can at the same note i want to personally also assure you that i am here to help you in your journey in learning angular so make sure that you reach out to me wherever you are stuck this is part of angular crud full tutorial playlist the playlist link is in the description box make sure you check out all the episodes in order to maintain a continuity a lot of you are already building your own feature modules which is very encouraging and exciting at the same time we are doing we are building a feature module called products for our e-commerce shopping cart application all right that's the context so this is part four of the series today we will install bootstrap in our application in the previous episodes we have learnt about the project we have learnt about some basic crud operations and we have also done our brand new angular application setup we have set up the mock endpoints and apis in the previous episode so today let's get started with bootstrap and install it in our application so bootstrap installation is pretty straight forward you can do it in two ways you can either do it with the cdn which is not really encouraged right so content delivery network which is nothing but a link a link for the style and the script files that's good when you're doing it in your local development or in development environment but it's really not encouraged in test stage or prod now you can use any framework for ui i am showing you example of bootstrap in this particular series in the next current series i will use material design that being said you are free to use whatever framework you are comfortable with be it angular material foundation css etc if you are following along we will build using bootstrap you can build similar ui using any framework and let the reason i'm telling you and highlighting this is because there is no correlation between the ui framework and angular angular can work with any ui framework be it material design foundation css any css custom css etc that being said let's go to our application and we are continuing to make some quick notes this i'll keep them i'm keeping them short intentionally but make sure you follow along so you can use any framework any design framework to build your site right to build your website now the css frameworks that we work with can be bootstrap framework can be material design right or can be any any it can be a custom design for your website or product that's totally fine now that being said let's start with the first step of installation of bootstrap framework now so so to do that what we'll run is we'll run npm install hyphen hyphen save bootstrap and bootstrap has a dependency on jquery and popper these these three we have to install them together remember friends this is for bootstrap 4 right bootstrap version 4 but if you are trying alpha version of bootstrap 5 it doesn't require jquery okay so i'll cover that later some other time but just for your information bootstrap 4 requires jquery bootstrap 5 doesn't require it alright so this is the command we have to run to install it so let's quickly run that i'll go to the root level and here i am inside shop for less project and here i will run the command npm install hyphen hyphen save bootstrap jquery and popper so what it will do is it will get me the latest versions of these three libraries also make an entry in package.json right so that's where our dependencies are measured and installed so it will install packages and it will update package.json file okay so this is the ideal way this is the ideal way you can like i said you can also do with cdn which is content delivery networks so they will provide you with links okay uh it's not encouraged right so a lot of times um they also ask you in the interviews that should you use cdn should you use package so this is not increased way of doing things because in production environments you don't want you don't want to expose it to internet and a lot of things right you don't want to link directly to something on internet so rather you would want to have the packages downloaded in your pipeline right so that's why we will always use the installation of packages that's the proper way of doing it all right so let's give it a quick minute while it is doing if you're liking the series liking the video give a thumbs up to this video and i see a lot of encouraging comments thank you thank you so much for putting that lovely comments it encourages me to bring you more useful tutorials that being said now have a take a look here it says bootstrap 4.5 is done jquery 3.5 popper 1.0 is installed at the same time you can go to your package.json and you can see entries you should see entries here for bootstrap jquery and popper right so in our package also there is an entry beautiful this means the packages are installed now comes the important step very very important step a lot of developers a lot of developers make this mistake so let me start by saying you that if you don't do this step if you don't do this step do this step correctly correctly your application will not work not load the css okay load bootstrap so make sure you follow along so the this step is important what i'm going to show you which is you have to go to update in angular dot json file you have to to update update the style and script path of bootstrap and jquery if you don't do this step you are it will not load okay so let me just say 5.1 so just so you know right so if you don't do this step it will not work so remember friends it's very very important a lot of you will make mistake here so go to angular.json under build right go to angular.json under build you will see styles and scripts right so here you have to give the node modules path and the path will look something like this node modules bootstrap dist so module test slash uh css slash bootstrap dot min dot css okay this is a path it will take for css now similarly under scripts you have to add for first you have to add for jquery and you will say jquery dot min dot js all right and then you will say bootstrap dist min dot js okay so remember this is the important step in angular dot json file in in the in the build update styles and script path okay uh just so you know let me copy it for you okay so this is what you have to update so once you update it is it done sometimes what happens is we are already running so this is another mistake right so another common mistake that is you have your application you don't restart you don't restart your application this is a common common mistake that i hear from a lot of developers they have made the changes but they say i don't see the changes that's because you have not restarted the application remember when we make changes in the files angular cli will do hot reload which means automatic reload of the application okay but when we make changes to angular dot json it does not auto reload okay so this is yet another common mistake a lot of people do so what we need to do whenever you make changes whenever you edit or make changes in angular.json always restart your application okay so let's see that now so this is what it is see right now it's compiling right so it will not compile because i have to restart it so again do a ng ser so now i'm restarting now i should see the bootstrap applied into my application all right so let's give it a minute while it's compiling and building i'll again request you a lot of you have been hearing your comments a lot of positive comments encouraging feedback thank you thank you thank you so much for that keep doing that at the same time also please do like my videos to encourage me to sub and also subscribe to my channel all right so we see our application is compiled let's reload so we see it is not yet applied right so what i'm going to do is first i'll go to app component app.component.ts and then i will delete everything here okay except the first line and what i'm going to do is i'm going to grab quickly get bootstrap and take some quick navbar right i don't want to spend too much time on it now in this episode but something to see it working right so we can take any common basic one and just paste it here so now we will see a bootstrap right so we see this is the bootstrap layout now how do i know it's working right so i'm going to wrap it and i'm going to say bg primary which is a utility class provided by bootstrap to put background color to primary right and this will not work uh so instead i'll just uh add a div so this is just a quick testing purpose so to test whether our framework is has loaded or not so welcome to shop4less.com all right so we can see that it has applied the background blue color i see the navbar i see the drop down working which means jquery is working responsive is working that means our site is up and running and at the same time i can see that bootstrap is getting applied right so what i'm going to do i'm going to quickly fix some uh menu i made this nav bar change as the logo and we can customize the the links right we can say nav link inside the css we can just add a quick css and say color should be white and we'll give them a important right so our white doesn't look that great i can make it gray all right okay so gray looks good similarly i can give it for navbar nav brand so if you are wondering how i remember the name of the colors uh so i've worked 10 years in as a full stack developer so i buy heart all the colors hex colors that i have used over a period of time you too will don't worry once you start working along all right so we have it here beautiful so we have our applications navbar ready and we see that bootstrap is applied it's ready now we can start building our ui screens right in the next episode we will start actually building our feature modules called product and we'll set up all the routing everything for it thank you so much for joining in this episode i hope you are enjoying this series as much as i am enjoying teaching you if you have any feedback for me please drop in in the comments i really appreciate that thank you so much you take care i'll see you in the next episode

Channel: ARC Tutorials

Views: 11,971

Keywords: angular crud with web api, angular crud tutorial, angular crud operations, angular crud project, angular crud example, angular crud with json server, angular crud application tutorial, angular crud table, angular crud mysql, crud angular 9, crud angular 8, angular bootstrap crud example, angular bootstrap crud, install bootstrap in angular 9, install bootstrap 4 with npm, install bootstrap in angular 8, install bootstrap in visual studio code, install bootstrap angular 9

Id: f8vw2AAOaSQ

Length: 15min 50sec (950 seconds)

Published: Wed Jul 29 2020