Using Bootstrap 4 with Angular 6|5

Using Bootstrap 4 with Angular is now updated to Angular 6

Bootstrap is the most popular HTML and CSS framework for building responsive layouts with ease and without having a deep knowledge of CSS (Still custom CSS is required to customize your design ane make it different from the other Bootstrap-styled websites unless you are using a BS theme developed specifically for you).

Bootstrap 4 is the latest version of BS which brings many new and powerful features to the framework most importantly Flexbox which is now the default display system for BS grid layout (one of the most important features of BS).

In this tutorial we will see how to use Bootstrap to style websites built using the Angular 6|5 framework. We'll see how we can easy integrate both of them, using ng-bootstrap vs. ngx-bootstrap packages and using the Angular CLI for generating a brand new project.

Installing Angular CLI 6

So let's get started by installing the Angular CLI 6 in case it's not yet installed on your system.

Head over to your terminal or command prompt then run the following command to install the latest version of the Angular CLI (Version 6 as of this writing)

$ npm install -g @angular/cli@latest

This will install the CLI v6 globally so depending on your npm configuration you may need to add sudo (for superuser access).

After the installation, you'll have at your disposal the ng utility. Let's use it to generate a new Angular 6 project.

$ ng new ng5bootstrap4

This will generate the directory structure and necessary files for the project and will install the dependencies.

Next navigate inside the root folder of the newly created project

cd ng5bootstrap4

You can then serve your Angular 6 application using the ng serve command:

ng serve

Your app will be served from http://localhost:4200/

Adding Bootstrap 4 to Angular 5

Now head back to your terminal then install Bootstrap 4 via npm

 $ npm install --save bootstrap

This will also add the bootstrap to package.json.

Bootstrap 4 assets get installed inside the the node_modules/bootstrap folder so you'll need to include the CSS files at the head of your app main HTML file or also with an @import in style.css

@import "~bootstrap/dist/css/bootstrap.css"

Please note that Bootstrap 4 depends on jQuery and Popper.js libraries and since we are not including them any Bootstrap components that rely on JavaScript will not work. So why not include those libs? For Angular it's better to avoid using libraries that make direct manipulation of the DOM (like jQuery) and let Angular handle that.

Now what if you need the complete features of Bootstrap 4?

You have different ways either include jQuery, Popper.js and bootstrap.js, which is not recommend, using the scripts array in the .angular-cli.json file

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/popper.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Adding Bootstrap 4 Using ng-bootstrap and ngx-bootstrap

Another better alternative way is to use component libraries created for the sake of making Bootstrap work seamlessly with Angular such as ng-bootstrap or ngx-bootstrap

Bootstrap 4 Angular 6

Should I add bootstrap.js or bootstrap.min.js to my project? No, the goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code Source

So first you'll need to install the library from npm using the following command:

npm install --save @ng-bootstrap/ng-bootstrap

Once you finish the installation you'll need to import the main module.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

Next you'll need to add the module you imported in your app root module

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [/*...*/],
  imports: [/*...*/, NgbModule.forRoot()],
  /*...*/
})
export class AppModule {
}

Please note that ng-bootstrap requires Bootstrap 4 CSS file to be present.

You can add it in the styles array of the .angular-cli.json file like that:

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],

Now you can use Bootstrap 4 in your Angular application.

You can find all the available components via this link.

You can also use the ngx-bootstrap library Bootstrap 4 Angular 6

Simply head back to your terminal, make sure you are inside your Angular project then run the following command to install ngx-bootstrap

npm install ngx-bootstrap --save

You also need the Bootstrap 4 CSS files. Add the following line in the <head> of your Angular app which includes Bootstrap from a CDN

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

You can also install bootstrap from npm and use the previous way to include the CSS file (via the styles array in the angular-cli.json file)

   "styles": [  
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",  
   "styles.css"  
   ],

Next open src/app/app.module.ts and add

import { BsDropdownModule} from 'ngx-bootstrap/dropdown';
import { AlertModule } from 'ngx-bootstrap';

/*...*/

@NgModule({
   /*...*/
   imports: [BsDropdownModule.forRoot(),AlertModule.forRoot(), /*...*/ ],
    /*...*/ 
})

This an example of importing two components BsDropdownModule and AlertModule.

You need to import the module for each component you want to use in the same way.

ngx-bootstrap provides each BS component in each own module so you only import the components you need. In this way your app will be smaller since it bundles only the components you are actually using.

You can find all the available components that you can use from the docs

Adding Bootstrap 4 to Angular 6

The previous ways of adding Bootstrap 4 in Angular 5 work also for Angular 6. But thanks to the new ng add command added on Angular 6, you have a new simpler and easier way to add Bootstrap without explicelely npm install required dependencies or adding any configurations. You can simply run the following command to add ng-bootstrap using Schematics:

ng add @ng-bootstrap/schematics

That's it. You now have support for Bootstrap components and styles without any extra configurations. You also don't need jQuery since we are using ng-bootstrap.

Conclusion

In this article, we've seen different ways of including Bootstrap 4 in Angular 5 apps: Using original Bootstrap 4 assets from npm, using the ng-bootstrap library and finally using the ngx-bootstrap.

If you want to compare ng-bootstrap vs. ngx-bootstrap the most important point is how ngx-bootstrap uses separate modules for components to reduce the final app size.

This article is also updated to show you how to quickly add Bootstrap 4 to the new Angular 6 version using the new ng add command.


comments powered by Disqus