Menu
I am trying to show dropdown menu using bootstrap4.3 class but after selecting on menu nothing will happen I ma using angular 8 version.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
924
Why dropdown link is not working in bootstrap? Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle=”dropdown” to toggle the dropdown.
You have to make sure that popper. js is included and loaded in your Angular app because that is required for all things that pop up or drop down in Bootstrap 4.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown. Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.
To add a dropdown-box to a web page, you would use a select element or a list-item. The first <option> tag in the select element needs to have the selected option set to the value of selected.
Bootstrap dependencies are popper.js and jquery. Once you install bootstrap in your angular app, it will show you the dependencies, then install them and add them in your angular.json in scripts (see the below picture). The versions compatible are [email protected] (the dropdown issue fixed in this version) and [email protected]
So with the above order, now the dropdown will work. Even with latest versions(4.5.x) of bootstrap works. You do not have to use another third party library/package manager for that, if you do not prefer. Thanks. Please see the relevant markup below, taken from bootstrap.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
