I'm currently using bootstrap v4.5 in my Angular project and whenever I click on my dropdown button, its value remains the same irrespective of the dropdown menu item I'm clicking. I want the text of my dropdown button to change to whatever dropdown menu item I'm clicking on. Can someone pleas help me with this.
My HTML code:
<div class="dropdown">
<button class="btn btn-light dropdown-toggle mx-5 w-75 d-flex justify-content-between align-items-center" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
2021
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item">2011</a>
<a class="dropdown-item">2012</a>
<a class="dropdown-item">2013</a>
<a class="dropdown-item">2014</a>
</div>
</div>
The functionality that you're looking for can be found in the HTML tag
<select>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
Bootstrap is a style library only (with some JavaScript but only for interactions) This template shows how to create a dropdown, but for the logic part, you will have to integrate it with your frontend framework.
In native JavaScript, it would be up to you to update the text directly when you detect a click. With Angular, I guess it's possible to make it reactive. You should be able to create a dynamic state, which is reflected in the button text, and which you update when the list is clicked.
I'm not an Angular specialist, so I'll let the experts answer you on this point
There may be times you want to emulate a <select> element with a dropdown. Here's how you can achieve that with angularJS.
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.years = [];
let y = 2010,
thisyear = new Date().getFullYear();
while (++y <= thisyear) $scope.years.push(y);
$scope.chosenYear = thisyear;
$scope.chooseYear = function(y) {
$scope.chosenYear = y;
}
}]);<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div ng-app="myApp" ng-controller="myController">
<div class="dropdown">
<button class="btn btn-light dropdown-toggle mx-5 w-75 d-flex justify-content-between align-items-center" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{chosenYear}}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" ng-repeat='year in years' href="#" ng-click='chooseYear(year)'>{{year}}</a>
</div>
</div>
</div>