How to use ngx-bootstrap in Angular

`ngx-bootstrap` is a flexible library built on top of Angular to be used in Angular. It uses Bootstrap library to provide its components styling.

Step 1: Install library

It is assumed that you have already created an Angular application.

Install the ngx-bootstrap package using command below:

`npm install ngx-bootstrap –save`

Step 2: Import required packages

Next step is to import required packages in main module file. You can import as much packages you need, but it is not advisable to import unnecessary packages.

For ex. you need AlertModule then import it like this:

import { AlertModule } from 'ngx-bootstrap/alert'; 

@NgModule({ 
  imports: 
    AlertModule.forRoot(),
    ...
  ] 
}) 

export class AppModule(){}

Step 3: Use template

The next step is to use template code to see the result.

 
  Well done! 
  You successfully read this important alert message. 
 

 
  Heads up! 
  This alert needs your attention, but it's not super important. 
 

 
  Warning! 
  Better check yourself, you're not looking too good. 
 

 
  Oh snap! 
  Change a few things up and try submitting again. 

The result will be displayed like this:

Conclusion:

ngx-bootstrapis a styling library to provide bootstrap features in Angular. It uses bootstrap css framework internally to display the modules. The library is easy to use in live as well as any educational purpose projects.