With Angular2 CLI, the approach to include Bootstrap components is somewhat different that the traditional way of installing our packages and including our framework references manually. In this article, we take a look at build an Angular2 app using the Angular CLI. We also show how to include the Bootstrap framework in our application.
Build the app
We start by building the application using the CLI command. For this, we assume you have already installed all the Angular2 dependencies.
Open a command line and type the following commands:
ng new ang2-bootstrap
ng generate component menu
This commands scaffold a component named menu using the basic template. The component is created in a folder under the app directory (src\app\menu) with a component, test, html and css files.
ng serve
ng serve
At this point, we have a simple application that can be built and loaded by running the ng serve command. Open the browser and load the application using the address that is shown on the console.
Customization
There is nothing special about the app. We should now add some customization to our application by removing some of the default stuff that was created by the CLI. Do not stop the tasks, so we can see how our page changes as we add our customization. Let’s start by editing the src\app\app.component.html file. Let's replace the current mark-up with this:
<!--The whole content below can be removed with the new code.-->
<div id="wrapper">
<div id="page-content-wrapper">
<nav class="navbar navbar-default navbar-fixed-top bg-primary">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> Welcome to {{title}}!!</a>
</div>
</div>
</nav>
<div id="page-content">
<div id="page-sidebar">
<app-menu></app-menu>
</div>
<div class="container-fluid" id="page-content-main">
<div class="page-header">
<h1>Content </h1>
</div>
<section class="row text-center placeholders">
</section>
</div>
</div>
</div>
</div>
We are adding some headers and content layout to make the application better looking. Notice how we are also adding the app-menu mark-up. This is the directive to load our menu component that was created with the CLI command. We can now add this mark-up to the src\app\menu\menu.component.html file.
<nav class="navbar navbar-default sidebar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidemenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="sidemenu">
<ul class="nav navbar">
<li *ngFor="let menu of menus">
<a href="{{menu.url}}" class="primary" target="_new" title="{{menu.title}}" (click)="menu.selected = !menu.selected">
<i class="fa fa-fw fa-2x {{menu.class}}"></i> <span class="nav-header-primary">{{menu.title}}</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
We just added the Bootstrap navbar menu that we can dock on the left side of our application. The menu component view needs a menus property from the components class. This is how it gets the data that it needs for the menus entries. Replace all the code from the src\app\menu\menu.component.ts file with the following code:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
constructor() { }
public menus: Array<IMenu>;
ngOnInit() {
this.menus = [{
"id": 1,"title": "Azure","class": "fa-cloud",
"url": "http://azure.com"},{ "id": 2,
"title": "AWS","class": "fa-cloud",
"url": "http://aws.amazon.com"},{ "id": 3,
"title": "Google Cloud",
"class": "fa-cloud",
"url": "http://cloud.google.com"}];
}
}
export interface IMenu {
id : number;
title : string;
class : string;
url : string;
}
Our JSON model is loaded on the menus property which implements an array of the IMenu interface. This allows us to strongly type our JSON data. Ideally this data should come from a common service.
If we take a look at the page, we should now see our menu options, but there is still no style there. We have added some of the Bootstrap styles to the mark-up, but we are not loading the Bootstrap dependencies yet. Let’s take care of that by adding Bootstrap and font-awesome to our app. This is good time to stop the ng serve command and enter the following commands:
npm install bootstrap@latest –save
npm install font-awesome –save
npm install jquery –save
On the first command, we are installing the latest 3.n version of Bootstrap. This is done by using the scope (@) and label latest. For Bootstrap 4, the label is next, but we are not using that version on this example. We are also using font-awesome for those fa fa-name icon that we want on our menus. Lastly, we need to install Jquery which is a dependency of the Bootstrap JavaScript file.
Configure the References
We now have all our dependencies installed (check for errors on the console). Now, we need to configure the references in our app. This is no longer done using the HTML tags on the page. We now need to add them to the collection of styles and script files on the .angular-cli.json file which should be at the root of our project folder. Find the following tags and replace with these snippets:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Update style.css
We should add the following to our src\style.css files. This is where we can add global app style classes.
/* You can add global styles to this file, and also import other style files */
body{
margin: 0;
overflow: hidden;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#page-content-wrapper {
width: 100%;
position: absolute;
margin-top:-20px;
padding: 0x;
}
#page-content{
margin-top:70px;
}
@media (min-width: 765px) {
#page-sidebar {
z-index: 1000;
position: fixed;
height: 100%;
overflow-y: auto;
}
#page-content-main{
margin-left: 220px;
padding:0;
}
}
@media (max-width: 765px) {
#page-sidebar {
z-index: 1000;
height: 100%;
overflow-y: auto;
background: #e7e7e7;
}
#page-content-main{
margin-left: 0;
padding:0;
}
}
Update our component styles
We also have styles that are specific to our component. Since these styles are only required by our menu component, we can use the src\app\menu\menu.component.css file for this purpose. Add the following to that file:
nav.sidebar{
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
@media (min-width: 765px) {
nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
text-align: center;
width: 100%;
margin-left: 0px;
}
nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
padding: 0 0px 0 0px;
}
nav.sidebar{
width: 200px;
height: 100%;
margin-left: -160px;
float: left;
margin-bottom: 0px;
}
nav.sidebar li {
width: 100%;
}
nav.sidebar:hover{
margin-left: 0px;
}
.forAnimate{
opacity: 0;
}
}
@media (min-width: 1330px) {
nav.sidebar{
margin-left: 0px;
float: left;
}
nav.sidebar .forAnimate{
opacity: 1;
}
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate{
opacity: 1;
}
section{
padding-left: 15px;
}
We can now load the app again by running ng serve, and we should see that we have a decently looking Angular2 with Bootstrap 3 app which has header, navigation menu and main content area.
App Preview
We will continue to work on this application to make it look great and add many features. Come back for more articles.
Thanks for reading.
