Post
Ask Question

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.
  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">[email protected]</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

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


Similar Articles