Steps To Add 🔗 ngx-bootstrap In Angular 7

Introduction

In this article, we will learn how to add Bootstrap 4 and ngx-bootstrap in an Angular 7 (Beta) application. It is an easy way to integrate Bootstrap 3 or Bootstrap 4 Components with Angular using ngx-bootstrap. It contains all the core Bootstrap components powered by Angular. It is used to create an Angular-specific version of the Twitter Bootstrap components. The project is run by Valor Software. There is no need to include the original JS components. Merits of Angular 7 as shown below,

It supports the MVC concept.
It always supports SPA applications.
It supports unit testing very easily.
It is open source.

Prerequisite

Node
Npm
Angular CLI
TypeScript
Visual Studio code

Set up for Angular 7

Description

Angular is an open source project which can be freely used, modified, and shared by others. Angular is developed by Google. Angular is a TypeScript based front-end web application platform. Before going through this session, please visit my previous sessions related to the Angular 7 application.

Steps to be followed,

Step 1

Open the VS Code terminal and write the below command to install ngx-bootstrap.

npm install ngx-bootstrap bootstrap --save

Now, in my machine, the latest Bootstrap version (bootstrap v4.2.1) and ngx-bootstrap (ngx-bootstrap v3.2.0) are installed successfully.

Step 2

Let's add our ngx-bootstrap components and that will be added to the root module. We first import the specific module for a specific component and then declare in the @NgModule.

Alert Component

Now, let's add our first alerts component to our app. Open src/app/app.module.ts and add the below line of code.

import { AlertModule} from 'ngx-bootstrap';
@NgModule({
...
imports: [AlertModule.forRoot(), ... ],
...
})

Finally, we have to declare the Bootstrap CSS file in styles array of Angular.Json file. Open .angular-cli.json and add the below line of code,

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

Let's set the alert in our component. Open src/app/app.component.html and add the below line of code to show alert functionality.

<alert type="success">Welcome To ngx-bootstrap</alert>

OUTPUT

Buttons Component

Now, let's add our buttons component to our app. Open src/app/app.module.ts and add the below lines of code.

import { ButtonsModule} from 'ngx-bootstrap';
@NgModule({
imports: [ButtonsModule.forRoot(),...]
})

Let's set the buttons in our component. Open src/app/app.component.html and add below code to show the button functionality.

<button type="button" class="btn btn-primary">
Single Button Using ngx-bootstrap
</button>

OUTPUT

Tabs Component

Now, let's add our tabs component to our app. Open src/app/app.module.ts and add the below lines of code.

import {TabsModule } from 'ngx-bootstrap';
@NgModule({
imports: [TabsModule.forRoot(),...]
})

Let's set the tabs in our component. Open src/app/app.component.html and add the below lines of code to show tabs functionality.

<div>
<tabset>
<tab heading="Name" id="tab1">Satyaprakash Samantaray</tab>
<tab heading="About">I am a Software Developer and MVP Winner</tab>
<tab heading="Contact">[email protected]</tab>
<tab heading="My Book">https://www.dotnettricks.com/mentors/satyaprakash-samantaray</tab>
</tabset>
</div>

OUTPUT

Progressbar Component

Now, let's add our Progressbar component to our app. Open src/app/app.module.ts and add the below line of code.

import {ProgressbarModule} from 'ngx-bootstrap';
@NgModule({
imports: [ProgressbarModule.forRoot(),...]
})

Let's set the Progressbar in our component. Open src/app/app.component.html and add the below line of code to show Progressbar functionality.

<div class="row">
<div class="col-sm-4">
<div class="mb-2">
<progressbar [value]="22" type="warning" [striped]="true">22%</progressbar>
</div>
</div>
<div class="col-sm-4">
<div class="mb-2">
<progressbar max="200" [value]="166" type="danger" [striped]="true" [animate]="true"><i>166 / 200</i></progressbar>
</div>
</div>
</div>

OUTPUT

Note

After some modification happened in the Angular.json file, if the output isn't shown as expected after saving the changes, we have to recompile the application to make the change happens. So, let's run the below command.,

ng serve

Let's create a row with 3 columns using Bootstrap 4.

<div class="row text-center">
<div class="col-4">
Satya
</div>
<div class="col-4">
Prakash
</div>
<div class="col-4">
Kulu
</div>
</div>

OUTPUT

Summary

In this write-up, we have learned:

Introduction to ngx-bootstrap
How to install ngx-bootstrap in Angular 7 Beta application
How to set-up ngx-bootstrap in Angular 7 Beta application
How to import components using ngx-bootstrap