Software systems to innovate and grow

Getting started on Angular 2 with Bootstrap

By Engineering Team May 14, 2017 10 mins read

Are you looking to whip up a quick prototype for your client?

Or are you new to Angular and you want your playground applications to look pretty?

No matter what your reason is, you can make your application look better with Bootstrap.

What is Bootstrap

Bootstrap is a responsive CSS framework. It makes front-end development faster and easier.

Don’t underestimate its power. Many large companies use Bootstrap! Twitter built Bootstrap and uses it to this day.

Bootstrap and Angular can be a lethal combination in your web development arsenal. Angular makes DOM manipulation, HTTP requests, security and so many other things easier. Bootstrap makes UI easier.

Is Bootstrap right for you?

Deciding to use another framework in your application can be a challenging task. You need to make sure that the framework does more good than harm.

So how can you make the decision?

If your application uses many components included in Bootstrap, use Bootstrap. Don’t reinvent the wheel.

If you’re building a unique application that has out-of-the-ordinary layouts, think twice. Bootstrap can do more harm than good. You don’t want to end up writing overriding CSS with important. You’d be more productive writing your own CSS or using a more flexible framework.

Don’t worry, there’s a middle ground too. If you only need a few styled components, you can customize Bootstrap. Its customize page allows you to cherry pick the elements that you want.

WARNING!! Bootstrap jQuery baggage

Yes, Bootstrap uses the dreaded jQuery library!

Bootstrap is more than a CSS file. It includes components such as modals, popovers, and tooltips. These components use JavaScript (jQuery) to manage state.

If you go through the bootstrap docs, you’ll notice code like this throughout.

You don’t want this code to litter your Angular application. Do you?

The whole point of using a framework like Angular is easy DOM manipulation and clean code.

So what can you do to keep your code clean?

There are two solutions.

1. Use Bootstrap CSS only

In this case, you would only use Bootstrap’s CSS. You’d have to build each Component (that requires JavaScript) from the ground up.

This is the more involved solution. Go this way if you’d like a higher level of customization and more flexibility.

It’s also a good idea if you’re working on a larger project that will grow out of Bootstrap. It will be a lot easier to migrate to a new set of styles when you have to.

2. Use a 3rd party library

If the first solution sounds a bit daunting, and you’re looking for a quicker solution, you’re lucky – it’s 2017. Other developers have already put out a solution.

ng-bootstrap takes the goodness of Bootstrap without the jQuery overhead. The ng-bootstrap team has built all the components from the ground up. ng-bootstrap is also recognized by the Angular team.

Another big plus to using ng-bootstrap is that it’s got almost 100% test coverage.

Version Information

The current version of ng-bootstrap is for Angular v4.

If you’re working with Angular v2 you can

  • upgrade to Angular v4 – it’s easy or
  • use an older version of ng-bootstrap.

If you’re working with Angular 1.x you can have a look at UI Bootstrap. But, it would be much better for you to upgrade Angular.

3rd party libraries – flip-side

I can’t emphasize this enough. If you aren’t using a significant number of features in the library, don’t use it.

To reduce the size damage of 3rd party library, you can –

  1. bundle your application (eg. with Webpack).
  2. use something like Angular CLI

Either way, you want tree-shaking (eliminating dead code) to be a part of your build process.

Angular and Bootstrap – Code Time

Now let’s write some code. We’ll go over the code required in both the solutions mentioned above.

Note: We are using Angular CLI for this demo project. Your configuration may differ based on your setup.

If you’d like to follow along, you can clone the git repo – git clone https://github.com/Cartab/angular-bootstrap.git.

1. Using Bootstrap CSS only

To access this code in the repository above, checkout the css-only branch.

First, we need to get the Bootstrap CSS library. We can fetch the dependencies with npm. This will download Bootstrap’s files and place them in `node_modules/bootstrap’.

Now we need to tell our config file that we want to use Bootstrap’s CSS file. With Angular CLI, the config file is .angular-cli.json.

That’s it! We can now start using Bootstrap’s CSS classes to style our components.

The way you import the CSS file into your project might be different. It depends on the tools you’re using and your project setup. As long as your build has the CSS file, everything will work fine.

2. Using ng-bootstrap

If you’re following along with the repo above, you can access this code on the ng-bootstrap branch. The code on this branch is the result of the steps described below.

Before we can use ng-bootstrap, we need to install its dependencies. ng-bootstrap requires –

  1. Angular v4 or above (we already have this)
  2. Bootstrap CSS (we need to install this)

The ng-bootstrap library doesn’t include Bootstrap CSS. This is a good thing. We can use a customized version of Bootstrap. That means no unnecessary CSS for features we aren’t using.

For this tutorial, we’re going to keep things simple and get the whole Bootstrap library with npm.

The steps are the same as above.

Once we’ve imported Bootstrap’s CSS, we can install the ng-bootstrap dependency.

Configuration time. We need to import this module in our root module.

Configuration complete. We’re ready to use ng-bootstrap.

We’re going to create a widget module and a simple component that displays a button with a tooltip.

We need to import the NgbModule in all the modules that use a ng-bootstrap component. Let’s do that first.
Note: The code for importing NgbModule in non-root modules is different. We don’t need to use the forRoot() method.

Now we can use Bootstrap in any component that’s a part of the WidgetsModule. We’ve created the HelloWidgetComponent in the demo application.

Here’s what some of the code from the HelloWidgetComponent looks like.

The simple demo application looks like this.

Application Screenshot

All that with a few lines of code! Have a look at the ng-bootstrap docs to use components like accordions and carousels.

Conclusion

Angular and Bootstrap make a great combination with many use cases.

There are many other UI Component libraries out there for use with Angular. Have a look at the UI Components section of the official Angular resources page.

If you’re curious about other CSS frameworks in general, check out these two frameworks –

  1. FoundationCSS – a more flexible (customization-wise) alternative to Bootstrap. Used by companies like eBay, Amazon, and Adobe.
  2. MaterializeCSS – based on Google’s Material Design spec.

There are 100s (if not 1000s) of CSS frameworks and UI component libraries out there. If the framework increases your productivity and doesn’t have massive overheads, use it.