First things first you want to add bootstrap 5 as an npm package like so
npm install bootstrap@next
In your angular.json add bootstrap stylesheet and javascript
"styles": [
"src/scss/styles.scss",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
],
"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Now add popperjs and add it to your scripts
npm install @popperjs/core
"scripts": [
"./node_modules/@popperjs/core/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Now lets test and see if everything works accordingly
Add a dropdown component to your app.component.html
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
You should be able to click and view the dropdown menu items
🔥Boomshaka-laka you're all set. Happy coding!!
Top comments (6)
Thanks, I had to use "src/styles.scss" instead of "src/scss/styles.scss" to make it work as default. I could have created scss directory of course
I moved my global style to the scss folder hence my path src/scss/styles.scss
Thanks, I'm glad this was useful to you 🙂👍
For not need add popper: "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
.bundle. already will it added
Thank you so much.
easy-peasy! Thanks man : )
very clear thank you