How 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

• Install the latest version of Node.js
• Install Visual Studio Code

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.

• Introduction To Angular 7 Using Bootstrap 4
• Set Up ⚙️ Angular 7 Beta On Windows, Linux, And Mac 💻

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.

1. import { AlertModule} from 'ngx-bootstrap';  
2.    
3. @NgModule({  
4. ...  
5. imports: [AlertModule.forRoot(), ... ],  
6. ...  
7. })  

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,

1. "styles": [  
2.               "src/styles.scss",  
3.               "node_modules/animate.css/animate.min.css",  
4.               "node_modules/bootstrap/dist/css/bootstrap.min.css"  
5.             ],  

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.

1. <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.

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

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

1. <button type="button" class="btn btn-primary">  
2.     Single Button Using ngx-bootstrap  
3.   </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.

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

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.

1. <div>  
2.     <tabset>  
3.       <tab heading="Name" id="tab1">Satyaprakash Samantaray</tab>  
4.       <tab heading="About">I am a Software Developer and MVP Winner</tab>  
5.       <tab heading="Contact">satyatohome@gmail.com</tab>  
6.       <tab heading="My Book">https://www.dotnettricks.com/mentors/satyaprakash-samantaray</tab>  
7.     </tabset>  
8.   </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.

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

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.

1. <div class="row">  
2.     <div class="col-sm-4">  
3.       <div class="mb-2">  
4.         <progressbar [value]="22" type="warning" [striped]="true">22%</progressbar>  
5.       </div>  
6.     </div>  
7.     <div class="col-sm-4">  
8.       <div class="mb-2">  
9.         <progressbar max="200" [value]="166" type="danger" [striped]="true" [animate]="true"><i>166 / 200</i></progressbar>  
10.       </div>  
11.     </div>  
12.   </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.

1. <div class="row text-center">  
2.       <div class="col-4">  
3.        Satya  
4.       </div>  
5.       <div class="col-4">  
6.         Prakash  
7.        </div>  
8.        <div class="col-4">  
9.         Kulu  
10.        </div>  
11.   </div>  

OUTPUT