ngx-bootstrap in angular

Introduction to ngx-bootstrap in angular:

ngx-bootstrap is a perfect way to integrate bootstrap 3 or bootstrap 4 components in angular. ngx-bootstrap is very flexible. You can implement your own templates, styles, and much more. It works on desktop and mobile with great performance. It has all core bootstrap components which are powered by angular. Therefore, there is no need to add original JS components. But, ngx-bootstrap uses CSS and markup provided by bootstrap. ngx-bootstrap is an open-source project. It is built by Valor Software.

Prerequisites:

• Node
• NPM
• Angular CLI

If you want to learn how to create an angular application, follow below article:
Creating a hello world application in angular

Once you have an angular application ready, you can install ngx-bootstrap by following the below steps.

Step1: Install ngx-bootstrap from npm:

npm install ngx-bootstrap –save

Step 2: Adding bootstrap styles:

Add bootstrap style into the index.html file. Include only one link from below based on which version of bootstrap you want to use.

Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Bootstrap 4:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

Step 3: Using ngx-bootstrap components in angular components:

Now, let’s add the necessary packages of ngx-bootstrap. You can import a particular module for a particular component. You have to declare the module into the imports array of NgModule.

Alert component:

Now, let’s add an alert component to our application. Include the following code app.module.ts file. You have to keep other code from this file as it is. Just include the below code in the file.

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

Now add the following code in the app.component.html file.

<div>
  <h1 style="text-align: center;">ngx-bootstrap</h1>
  <br>
  <alert type="success">Welcome to ngx-bootstrap in angular</alert>
</div>

Output:

Button component:

Now, let’s add a button component to our application. Include the following code in the app.module.ts file. You have to keep other code from this file as it is. Just include the below code in the file.

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

Now put the following code into the app.component.html file.

<div>
  <h1 style="text-align: center;">ngx-bootstrap</h1>
  <br>

  <div>
    <h4>Button Component</h4>
    Primary button:
    <button type="button" class="btn btn-primary">  
      Primary
    </button>
    <hr>
    Success Button:
    <button type="button" class="btn btn-success">  
      Success
    </button>
    <hr>
    Warning Button:
    <button type="button" class="btn btn-warning">  
      Warning
    </button>
  </div>
</div>

Output:

Conclusion:

You learned the following topics from this article:

• Installing ngx-bootstrap in angular.
• Importing ngx-bootstrap components in angular.
• Using Alert and Button Component from ngx-bootstrap.