Welcome to the continuing series on Getting Started with Angular 2. In the [previous post], we created our project using the Angular CLI. In this post, we will be adding the Bootstrap library to the
project to make it easier to style our application.
To make Bootstrap play nice with Angular we are going to use the ng2-bootstrap library which rewrites the Bootstrap components to be powered by Angular instead of JQuery. The ng2-bootstrap library also works with both Bootstrap v3 and v4 which means when v4 is finally released to production you will only have to change the Bootstrap css reference and fix any breaking changes listed in the v4 migration guide.
Bootstrap v4 is not yet recommend for production. The rest of this article is going to focus on using Bootstrap v3.
If you need the code from the previous post, you can get it from this Github repository in the 1-CreateProject branch.
The first thing that we need to do is install the ng2-bootstrap and bootstrap-sass libraries as dependencies for the project. Since we generated our project with the –style=scss flag, we need to use the bootstrap-sass module to get the
sass versions of bootstrap instead of the css versions that are contained in the bootstrap module.
Open a command prompt and navigate to your project directory
Run the npm install command below to install ng2-bootstrap and bootstrap-sass
npm install bootstrap-sass ng2-bootstrap --save
Updating the Angular CLI Configurations
Now we need to tell the Angular CLI about the Bootstrap scss file.
In your code editor, open up the angular-cli.json file.
Search for the styles node and add the bootstrap file
Note: If you already have ng serve running, you will need to stop it using ctrl+c and run ng serve again. Anytime you make changes to the angular-cli.json file, they will not take effect until ng serve is restarted.
The page should now look like
At this point you have your Angular 2 project with the Bootstrap library added for styling. The code for this post is available on Github.
In the next post, we will create a header and footer component that will be used on each page.