⚡Bootstrap 5 Responsive Navbar with Dropdown in Angular 17 |Bootstrap Navbar in Angular 17

[Music] hello guys welcome to my YouTube channel if you are new to my Channel please subscribe to my channel like this video and press the Bell icon in this video you will learn how to add a nav bar with a drop down in your angular 17 app first we will install angular 17 and then we will install bootstrap 5 and add a Navar with dropdown let's get started click here type CMD and press enter to open command prompt now type the command NG new your project name and press enter now use arrow keys to choose the stylesheet format CSS is already selected so just press enter now for server side rendering Type n and press enter it will take some time to download depending on your internet connection so please wait for the download to complete the download has been completed now type CD your project name and press enter to navigate to the project directory open your project in Visual Studio code open package.json file here you can see the installed angular version is 17.30 which is the latest version open a new terminal click here and select command prompt to open command prompt now type the command and G serve to run our app go to your browser and type Local Host colon 4200 and you will see new angular 17 Page with new logo let's install bootstrap 5 in Google type type bootstrap and press enter click on this link copy this command click here and select command prompt to open a new command prompt paste the copied command here if you want to install a specific version bootstrap 5.3.3 then just press enter otherwise remove 5.3.3 and press enter it will take some time to download bootstrap 5 depending on your internet connection so please wait for the download to complete the download is completed open package.json file and you will see bootstrap 5.3.3 independencies now open angular.js file here we need to add bootstrap CSS and JS path in the Styles and scripts array open nodecore modules folder scroll down and you will see bootstrap folder open bootstrap folder and you will see this folder you will see two folders in it CSS and JS in CSS folder look for bootstrap.min.css file we need to add the path in the Styles array open JS folder and look for bootstrap.min.js file we need to add this path in the scripts array let's add this paths in Styles array ad path for bootstrap CSS file in double quotes type nodecore module bootstrap /d/ CSS bootstrap.min.css copy this path and paste it in scripts array replace CSS with JS and bootstrap.min.css with bootstrap.min.js go to bootstrap website click on the docs link [Music] click on button component copy this code now open app. component. HTML file remove this code and paste the bootstrap code which we have copied go to your browser and reload the page the bootstrap Styles have not been applied so we need to restart the server open the terminal in which the server is running press crl plus C to stop the server and then restart the server using NG serve command now go back to the browser and you will see bootstrap buttons now let's add a Navar with dropdown look for the Navar component click on Navar component here is the Navar with a drop-down menu let's create a Navar component in your terminal type the command NG G C navbar and press enter here G is for Generate C is for component and navbar is the component name open navb bar. component. HTML file copy this code paste the code in the navb bar. component. HTML file open app. component. HTML file remove this code and add app Navar selector now open app. component.ts file and add navbar component in the Imports array also import Navar component go to your browser and you will see navbar with drop-down menu open navb bar. component. HTML file remove this code BG body color add BG dark and datab Bs theme equals dark for dark mode go back to your browser and now you will see a dark Navar open developer tools and you will see that the Navar is responsive click on this hamburger menu and the menu links will be opened click on the toggle device toolbar icon and you will see that the Navar is responsive on the mobile screen as well if you click on the drop- down menu and check your developer tools console you will see an error uncaught type error I.C create popper is not a function clear the console reload the page and click on hamburger menu click on the dropdown menu and you will see the same error it is showing an error because dropdowns are built on a thirdparty library popper.js therefore we need to add the path of popper.js in the angular.js file go back to bootstrap website click on the download link scroll down we need to add the path from nodecore modules at popper.js slore folder go to nodecore modules folder and look for at popper.js folder inside it open the at popper.js folder open this folder which is inside the core folder then open UMD folder Now look for popper db. MJS file here is the file path that we need to add to the scripts array in the angular.js file open angular.js file add a popper.js path before bootstrap.min.js file path type nodecore modules SL popper.js slcd /d/ pooer db. MJS in double quotes and add a comma Now go back to your browser and reload the page click on the hamburger menu and then click on the drop-down menu it still shows the error we need to restart the server go back to visual studio code press contrl plus C to stop the server and then restart the server using NG serve command go back to your browser and you will see the error has gone click on the hamburger menu now click on the drop- down menu you can see that the drop- down menu is now opening and showing the links let's change the text of the links open navb bar. component. HTML file change the text of the first link to company change the text of the second link to employees change the text of the third link to call go back to your browser and you will see that the link texts have been changed now you can create components for company and employees and add routing click on the IE button to see the video about angular routing in this video we learned how to install bootstrap and add a responsive navbar with dropdown thanks for watching please like and share this video And subscribe to my channel I will see you in next tutorial till then stay safe

Channel: Php Node Tuts

Views: 1,714

Keywords: angular bootstrap navbar, angular bootstrap dropdown, angular 17 bootstrap navbar, angular 17 bootstrap dropdown, angular 17 bootstrap 5 navbar, angular 17 bootstrap 5 dropdown, bootstrap in angular

Id: iahoqMgYKIU

Length: 13min 41sec (821 seconds)

Published: Sun Mar 31 2024