This tutorial is out of date and no longer maintained.
Warning: Since publication, UI Bootstrap is “considered feature-complete and is no longer being maintained.” NG Bootstrap is a suggested alternative.
Bootstrap and Angular are tools that a great number of people use. Oftentimes, they are used together in projects. And why shouldn’t they be? They are both incredible tools that have changed the way CSS and JS work on the front end.
There is a problem when using them together though, specifically when you try to bring in the Bootstrap JavaScript components into an Angular project. When building out Angular projects, you should not add on the full jQuery library. jQlite is already included in Angular and this should be all the jQuery that is necessary. This is an important concept to grasp since bringing jQuery into your Angular project will make it harder for you to fully grasp the power of Angular and its data-binding goodness.
If you want to change the view in some way, it is a good practice to change your views based on your Angular data. We’ll examine exactly what this means in this article since the Bootstrap JS components provide an opportunity to learn the differences in how jQuery and Angular are used differently for the same goals (like an accordion).
Today, we’ll be looking a bit at the problems of Bootstrap JS and Angular together, why you shouldn’t use the Bootstrap JS library that relies on jQuery, and the best alternative to get the Bootstrap JS components we know and love into our Angular projects (UI Bootstrap).
This problem goes back to the rule that you shouldn’t use jQuery in your projects. The way jQuery works to manipulate data in your views fights directly with how you use Angular to manipulate your views.
The way you manipulate data with jQuery is essentially grabbing and injecting into your DOM-based on events. So when we use the Bootstrap JavaScript components, like a button, we are saying “when this button is clicked, toggle this button to active”. This will set the button to active by adding an .active
class and checking an input box (if your button is an input checkbox).
With Angular, manipulating data isn’t a grab and inject sort of affair. Things are data-bound so we don’t need to do all that barbaric grab and inject stuff. We should be able to bind a variable to each component (button or collapse) and then toggle it based on the true/false nature of that variable.
This is why we can’t just use Bootstrap JavaScript. It relies on jQuery and we don’t want jQuery rummaging around our Angular projects. If we try to bind variables to the components, it won’t work.
Now we could totally create a couple of Angular functions like toggleButton()
and then call that on an ng-click
but we shouldn’t have to do hacky things like that. Angular’s data binding should allow us to set a variable and watch it mirror all the places the variable is referenced.
So what is the solution? We are taught in Angular that whenever we want to bind data to a certain component, we should build a directive. This will let Angular know that a specific part of our site should be watched for data changes.
The solution is a project called UI Bootstrap. These are built by the AngularUI team that adds many components to extend Angular. The UI Bootstrap doesn’t use jQuery and uses directives built from the ground up for each of the Bootstrap JS components
The requirements for UI Bootstrap (unlike BootstrapJS) are:
That’s it. Now how do we integrate it into our projects?
Let’s take a look at what our setup is to make this work. If you already looked at the JavaScript code, you’ll see that we created an Angular module and controller. Then we created variables for the buttons and for the collapse.
The next step for this is to grab the UI Bootstrap file and include that in our project. Then we are able to inject ui.bootstrap
into our Angular module. Just like that, we have all the directives we need to mimic the Bootstrap JS components!
// create our angular app and inject ui.bootstrap
angular.module('app', ['ui.bootstrap'])
.controller('mainController', function($scope) {
// BUTTONS ======================
// define some random object and button values
$scope.bigData = {};
$scope.bigData.breakfast = false;
$scope.bigData.lunch = false;
$scope.bigData.dinner = false;
// COLLAPSE =====================
$scope.isCollapsed = false;
});
Now, the correct way to use these would be to adjust the value of these variables when a button is pressed.
Per the UI Bootstrap Docs, the correct way to use checkbox buttons is to add the ng-model
for what it defines, and to add the btn-checkbox
attribute. Here’s the code for our buttons:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>
Breakfast
</label>
<label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>
Lunch
</label>
<label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>
Dinner
</label>
</div>
Now, we can see the model change as we click our buttons, just like we would expect them to.
For the collapse, we will open and close the panel based on the true/false
value of the isCollapsed
variable. So we will use ng-click="isCollapsed = !isCollapsed"
. This will toggle our isCollapsed
variable which in turn will toggle our panel.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" ng-click="isCollapsed = !isCollapsed">
Collapsible Group Item #1
</a>
</h4>
</div>
<div collapse="isCollapsed">
<div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
Now both of our components work! And in beautiful Angular fashion, set a variable, see it affect something in the view.
I’d encourage you to look through the UI Bootstrap Docs to see all the directives they provide to match the Bootstrap JS components.
Just keep in mind that this great tool exists when integrating Bootstrap JavaScript and Angular. The directives are there to make projects easier to deal with and create them in the Angular way.
Thanks for reading and sound off in the comments if you have any questions, know of any other tools, or just really like UI Bootstrap.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.