How to Use Bootstrap 4 with Angular

Use Bootstrap 4 with Angular

Bootstrap is the most popular HTML, CSS, and Javascript framework for developing website and web applications. Angular is a web application framework used for creating dynamic websites. Bootstrap and Angular are great tools for front-end web development.

There are many websites that make use the power of Bootstrap and Angular to create stunning websites or web applications. For example, Kodable and Bizns.

Also Read: How to Use Bootstrap 4 With ReactJS

So it seems logical to combine these two frameworks to create great looking web applications. But unfortunately, Bootstrap and Angular do not work very well together. There are some issues when using Bootstrap and Angular together in the same project. These issues arise because of using Bootstrap JS, which uses the jQuery library, together with Angular.

Bootstrap has a dependency on JQuery. It uses the jQuery library for the components like tooltips, modals, popovers etc. When using Angular in your projects, you should not add jQuery library with Angular. Bootstrap JS will create a conflict with Angular. The reason for this conflict is that the way jQuery and Angular manipulates the view is completely different. jQuery manipulates the data in the view is by grabbing and injecting DOM based on events. The data manipulation in Angular takes place by data-binding. This means that a variable is bound to the component. The state of the component is changed based on the true or false value of the variable.

Angular already has jQlite included in it and does not depend on jQuery. For this reason, you don’t need to include jQuery.

So, is there any way you can combine the two frameworks? Yes, there are two ways that you can Bootstrap to make the development of the UI easier and Angular to make DOM manipulation, HTTP requests, and a whole lot other things easier.

Recommending reading: 10 Best Material Design Frameworks

The first solution is to use Bootstrap CSS only. But this way you can create Bootstrap components that do not use JavaScript. You will have to build your components that require JavaScript on your own, from scratch.

The other option is to use other libraries like UI Bootstrap or ng-bootstrap that combines the best of both worlds.

In this article, we will be discussing the Angular project ng-Bootstrap which has a set of Angular directives that is based on Bootstrap.

Getting Started with ng-bootstrap

ng-bootstrap is a repository that allows you to use Bootstrap with Angular without any dependency on jQuery or Bootstrap’s JavaScript. ng-bootstrap is a repository that contains native Angular directives based on Bootstrap’s HTML markup and CSS. So, you can have Bootstrap’s styles with the power of Angular with ng-Bootstrap.

Before you install ng-bootstrap, you need to install the only two dependencies required. They are:

  • Angular 4+, and
  • Bootstrap 4 CSS

Next, to include Angular, in this article we will be using Angular CLI. To install Angular CLI in your project, enter the following command using npm.

Now, you can initiate a new project in the following way.

This will create a new project folder for you. Now navigate to the project folder and start up the web server.
You can install Bootstrap using npm using the command
After installing these dependencies, you can install ng-bootstrap as an npm package using the command
To start the web server, enter the following command.
After installation, you need to import ng-bootstrap’s main module. To do that add the following statement to app.module.ts file.

Next, what you need to do is list the imported module to your application module as follows. For the root module, you need to call the forRoot() method.

Other modules in the application can simply import ngbModule as follows:

Start Coding With ng-bootstrap

ng-bootstrap has many components that are already there in Bootstrap and some more. The documentation of ng-bootstrap is very descriptive and you can go through the documentation and the getting started page on ng-bootstrap to familiarize yourself with the components.

In the ng-bootstrap documentation, you can find code example for all the components that you can use directly to your project so that you don’t have to build anything from the ground up. So let’s start by adding a simple dropdown to our example.

It will create a simple drop-down button like this.

Dropdown button using ng-bootstrapDropdown menu expanded

Now let’s try a combination of some of these components in an example. Let’s create a page with three tabs with a star rating, progress bars, and popovers in each tab.

For some of these components, you need to add the typescript in your component.ts file.

Typescript for the star rating

Typescript for progress bars

This code generates a page with three different tabs and a star rating, progress bars and popovers on each tab.

ng-bootstrap example - rating ng-bootstrap example - progressbar ng-bootstrap example - popover

Note: ng-bootstrap and ngx-bootstrap are two different projects created by two different teams. They are different but used for the same purpose. One of the main difference is that you can use ngx-bootstrap for both Bootstrap 3 and Bootstrap 4. ng-bootstrap is only for Bootstrap 4.

BootstrapDash believes in providing the best, efficient and quality bootstrap admin template to get your web application up and running easily and quickly. Visit our website to get to know more about our products. Want to create a stunning website of your own? Start learning

Leave a Reply