Angular 2 Project With Bootstrap

7 min readFeb 8, 2017

Introduction

In this tutorial, we will create a new Angular 2 seed project by using the Angular CLI tool. After that, we will add to the project Bootstrap, ng2-bootstrap and Font Awesome libraries. As a final step, we will configure a custom theme for Bootstrap.

Angular CLI

What is Angular CLI?

Angular CLI is a command line interface to scaffold and build Angular 2 apps. Angular CLI makes it easy to create a working application right out of the box. It follows the best practices suggested by the team behind the development of Angular 2.

Prerequisites

Angular CLI requires Node.js 4+ to be installed.

Installation

Angular CLI can be installed with the following command:

npm install -g @angular/cli

The -g argument is used to install Angular CLI globally. So what does this mean to our project? It means that we will be able to execute Angular CLI from any directory in our file system.

Scaffolding a new project

First we will create a new project using the ng new command.

ng new angular-bootstrap-demo --style=sass

The ng new command creates a new directory named angular-bootstrap-demo and scaffolds our new app inside it. It can take up to several minutes for packages to be downloaded and installed.

When the install process finishes, we should switch to the newly created directory with the following command:

cd angular-bootstrap-demo

Start Angular 2 application with ng serve. This command will start a development server that hosts the Angular 2 application. The application can be accessed through port 4200. If we write the following URL - http://localhost:4200 in the browser address bar, we should see a page similar to the one shown in Figure 1.

Figure 1. Scaffolded Angular CLI application

Bootstrap

In this step, we will add and configure bootstrap-sass and ng2-bootstrap libraries.

Bootstrap is responsive, mobile-first front-end framework. It is quite easy to use Bootstrap, it is very popular and it should increase the speed of development, compared to pure CSS.

Some of Bootstrap alternative are:

Ng2-bootstrap is library providing UI components for Angular 2. It contains Bootstrap UI components. The library itself is using markup and CSS provided by Bootstrap, javascript from Bootstrap is not included. There are many alternatives but we prefer this one because of its great community, maturity and support for Bootstrap 3 and 4. Some alternatives are:

Let’s begin by installing the required packages via the following command:

npm install ng2-bootstrap bootstrap-sass --save

Next, we need to open the src/app/app.module.ts file and add lines that are in bold:

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;
import { HttpModule } from ‘@angular/http’;
import { AlertModule } from ‘ng2-bootstrap’;
import { AppComponent } from ‘./app.component’;@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AlertModule.forRoot()
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

What we have done here? Basically, we want to demonstrate that ng2-bootstrap is initialized correctly so we have imported AlertModule into our application and displayed one alert on the page. That way we have checked that ng2-bootstrap is working.

Now we need to edit style.sass. After opening it, the style.sass file should contain a single comment. We need to add the following two lines at the end of the file:

$icon-font-path: “~bootstrap-sass/assets/fonts/bootstrap/”
@import “~bootstrap-sass/assets/stylesheets/_bootstrap.scss”

We have set $icon-font-path in order to specify path to Bootstrap fonts. What does @import directive do? Sass @import directive will take the file that we want to import and combine it with the file that contains the directive so we can serve a single CSS file to the web browser.

As the last step we will show message “hello” in the alert component. We need to open the src/app/app.component.html file and add this line at the end:

<alert type=”success”>hello</alert>

Now, we only need to reload the page in the browser. The page should now look different, with the green text showing “hello”, as in Figure 2.

Figure 2. The *Angular CLI* application with Bootstrap and ng2-bootstrap

Font Awesome

In this step we will add the Font Awesome library.

Font Awesome gives us scalable vector icons that can be customized by size, color, drop shadow, and anything else that can be done using CSS. An important feature of Font Awesome is that it is completely free, while other icons sets can be quite expensive. Originally, it was designed for Bootstrap. Some alternatives are:

So let’s get going. To install Font Awesome we can use this command:

npm install font-awesome --save

After the library is downloaded we need to open angular-cli.json file and edit values of styles and addons keys to have the following values:

“styles”: [
  “styles.scss”,
  “../node_modules/font-awesome/scss/font-awesome.scss”
]
…
“addons”: [
  “../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)”
]

By adding scss file to the styles array, the compiled Font Awesome css file will be added to the header of our index.html. By editing addons array we enable webpack, that is used by Angluar CLI, to include font files into compiled version of our application.

As the final step, let’s add an icon to our page. In src/app/app.component.html we need to add one line at the end of the file:

<i class=”fa fa-american-sign-language-interpreting fa-5x” aria-hidden=”true”> </i>

Reload the page in the web browser and we should see a new icon displayed on the page, similar to the one shown in Figure 3.

Figure 3. The Angular CLI application with Font Awesome

A Custom Theme

In the last part of the tutorial, we will add a custom theme to our demo project. To accomplish this we will use one of Bootswatch themes. The reasons behind choosing such a theme are:

Themes are very easy to install, just download css (scss) files and replace the one that comes installer with Bootstrap. For sass it is little bit complicated, but not too much.
Themes are open source.
Themes are tuned for Bootstrap 3.3.7, the one that we are using.
Themes can be used easily to demonstrate how to set them up in Angular CLI

Bootswatch has a lot of themes that can be found on their website. We will use the superhero theme. You are not obligated to use one of Bootswatch themes, you can use any other Bootstrap theme. So we need to download _variable.scss and _bootswatch.scss from the superhero page. In src/assets folder we create a directory named superhero-theme and copy these two files in the newly created directory. The style.sass file should be opened and should be edited to look like this:

@import “assets/superhero-theme/_variables.scss”$icon-font-path: “~bootstrap-sass/assets/fonts/bootstrap/”
@import “~bootstrap-sass/assets/stylesheets/_bootstrap.scss”@import “assets/superhero-theme/_bootswatch.scss”

With these changes we are creating one CSS file that contains Bootstrap with our selected theme. By using @import directive, sass will take the file that we want to import and combine it with the file we are importing into. So, content of _variables.scss, _bootstrap.scss and _bootswatch.scss will be included into style.sass and then compiled to CSS. This way, we will have only one CSS file that need to be server to the web browser.

We should edit the src/app/app.component.html file and add <div class=”container” ></div> around the current content. By doing this, we will mark the content of the page, and it should change the background color to blue. At the end, the src/app/app.component.html file should look like this:

<div class=”container” >
  <h1> {{title}} </h1>
 
  <alert type=”success”>hello</alert>  <i class=”fa fa-american-sign-language-interpreting fa-5x” aria-hidden=”true”> </i></div>

Reload the page in the web browser and it should now have a blue background similar to Figure 4.

Figure 4. The Angular CLI application with the custom theme loaded

Conclusion

Congratulations! We now have a fully functional Angular 2 project with the sass preprocessor, Bootstrap, Font Awesome and ng2-bootstrap. Now we have project which we can use as a seed project for our next awesome application. From now on you can concentrate on features and domain problems of your awesome application.

The complete source code of the project can be found at the following github repository.

I hope you enjoyed this tutorial and learned a thing or two. There is obviously much more to be done, but this should get you up to speed.

If you have any questions or issues getting this to work, feel free to contact me on @robince885 or in the comments below. I would like to thank @vdimitrieski for his help. You can follow his work here. Feel free to contact him as well.