Angular 17 Tutorial #6 - Install Bootstrap | Angular 17 Tutorial For Beginners

welcome back to AR tutorials this is angular 17 full tutorial series for absolute beginners as well as expert already developers if you're coming from previous versions of angular there are lot of groundbreaking changes in angular 17 which you need to learn upgrade in order to stay relevant in your job and in your careers this is that series to help you today we are going to learn how to install bootstrap framework in the previous episode we learned how to install angular material that's one of the most commonly used UI framework with angular applications however a large Enterprises and lot of uh companies use angular with bootstrap as well so this is my attempt to help you learn both Frameworks so that you stay up to date this is part six of the series and today we are learning how to install bootstrap in our angular 17 application all right so the rule is simple now to install any thirdparty library or any third party package uh that you want to use in your angular 17 applications the common command is npm install the name of the module or the package you want to install in our case we want to install bootstrap and we also want to use bootstrap icons right which are used often with bootstrap applications so we will install those two using npm command so note it down the command that you will use is npm space install space bootstrap space bootstrap icons this will install both bootstrap and bootstrap icons after that there is one more step I'll show you that in just a bit let's get started with the command first if you are new here we covered this um angular material buttons in the last episode just to make sure that it's installed correctly similarly we'll do a simple setup uh just to make sure that everything is neat and clean in our project so the command is npm install bootstrap this would just if you just want to use bootstrap you can just hit this command line that would do the part but I also want to install icons so I'm hitting npm install bootstrap and bootstrap icon so it says added three packages now go to your package.json that's one of the most common ways to check whether boots was successfully added or not so if you see the package.json now you can see that it added bootstrap and bootstrap icons that means bootstrap is successfully installed however now if you run the application and refresh you don't see any changes right the reason being that we already updated our angular Json right and if you go into this and check the Styles we said clearly that no we want to use angulars predefined CSS that's why it's not showing up okay and where do we do it we do it in the build okay architect build inside that we update the Styles and the script now since we want to use bootstrap what you will do is you can just copy this entire thing the location of the files okay so in if you have installed correctly it's in your node modules all right you can explore it here as well and check that it's installed correctly so inside the node modules you should have bootstrap like how you have angular and let me see if I can find that for you this would be a big list but you can see here we got the bootstrap right so that's what we want to install and then it would be inside the source so now you have to check which source you are using since we are using scss bootstraps so it will be under scss slash now you can check for the file that you're looking at right now bootstrap.css that's the file that we will need to install in our application so now this is bootstrap CSS same way you can copy and you can add icons. scss that now here you would make it icons folder and here you will make it fonts okay right uh font sorry okay so this is the CSS that is required and you will remove this okay the I'll remove the angular style so it won't be anymore angular now same way we'll need to install the bootstrap Js okay from bootstrap after CSS you need to install the JS which is Javascript okay so you can see here JS disc and you will have all the JS files related to bootstrap okay but however we want to you if you want to use any particular one you can use that if you want to use all of them together you can do that also all right so the basic uh thing that you will install is just give me one second I did I think I goofed up okay all right so you got the bootstrap then you got the so this is the exact thing that you would follow you can take it from disc also that's also fine oops disc and you can copy this JS files as it is which is what you can see here you can see bootstrap min.js so these are all the different locations of the Styles and the CSS that you want to provide alternatively you can use directly from disc folder which is what I encourage people so you can type here also disc and you can just use CSS / bootstrap min. CSS okay if you don't want to use the scss that's again up to you uh which one you want to use there is no restriction all right all right so now this is saved and once you do that close the compiler and restart angular application by serving NG serve okay so it says could not resolve bootstrap dis bootstrap min.js let's check it out bootstrap min.js which is here let me find that and check why it's causing that problem we got the node modules and inside the node modules we got bootstrap that's correct we got D and let's check okay because bootstrap disc sljs okay so now should be good so let's restart so make sure you give the correct path that's that's the only thing that I have to insist now you see the everything got changed to bootstrap okay now if I go back to my app component again these are all very very simple basic things don't worry if uh too much about it but I'm I just gave you all of this details so that you should be aware where to find it okay because sometimes your location may be different but this is exactly what you would copy paste if you want to get that included now in this I'm going to throw in um H1 and simply assign a class say BG primary that's one of the bootstrap class and say bootstrap class enabled okay and now reload and now you see BG color is coming which is blue that means it is bootstrap is working as expected it means the installation is done and white okay so now it's white color right so this is one of the simple classes of bootstrap to test okay so right now what we have done is we have learned how to install both angular material as well as bootstrap okay now I will probably be focusing more like I said in this series on angular material but this is how you can learn bootstrap also if you want to start using it all right there is no restriction angular works well with any UI framework of your choice all right so I just showed you how to install bootstrap how to test whether your bootstrap is correctly installed and it's working in your application or not all right that's all for today I don't want to push too much in the next episode very very important episode because there are a lot of changes to previous versions so I will go in detail over the folder structure of the angulus 17 a lot of people a lot of you have written to me asking where are the end to endend testing files that used to be there earlier where is the protractor etc etc so all of that has gone away there is new support for testing I'm going to show all of that in the folder structure make sure that you don't miss it right I hope you're enjoying the series if you are please hit that like button for me if you have not already subscribed please do that to show me some love thank you so much see you in the next episode

Channel: ARCTutorials

Views: 15,226

Keywords: angular 17 tutorial, angular 17 tutorial for beginners, angular 17 crud, angular 17 features, angular 17 full tutorial, angular 17 complete tutorial, angular 17 live project, angular 17 project, angular 17 crud tutorial, angular 17 best tutorial, angular 17, angular 17 signals, angular 17 defer, angular 17 components, angular 17 templates, angular 17 course, angular 17 full project, angular 17 routing, angular 17 crash course, angular 17 ssr

Id: noRJ4SpAZ-E

Length: 9min 49sec (589 seconds)

Published: Mon Jan 22 2024