Simple Use of Bootstrap In Angular Apps with ngx-bootstrap


Are you trying to integrate bootstrap in angular apps? If so, this article will help you to use bootstrap in angular apps with ngx-bootstrap.

Nowadays, responsive UI is very important and demanding technology for our applications. And bootstrap is a framework that provides us all the facility to achieve the responsive UI.

Intallation of ngx-bootstrap

By using npm command in your app, you can simply install and set up the bootstrap.

Suggested visit: Build Angular Apps Using Angular CLI


npm install ngx-bootstrap --save

Also, you need to add bootstrap styles to your index.html.

Bootstrap 3

<!-- index.html -->
<link href="" rel="stylesheet">

OR Bootstrap 4

<!--- index.html -->
<link href="" rel="stylesheet">

If you’re looking to set up your app using angular-cli and bootstrap, you can use this guide, that will help you to set up using angular-cli.

Usage of ngx-bootstrap components

As we can implement different components in out traditional bootstrap app, here also we can use number of components with the help of ngx-bootstrap.

Use of Alerts

Alerts are generally used for showing a flash/notification to the user after performing certain actions.

First of all, you need to import the AlertModule in your main module to start using that through your app.

// RECOMMENDED (doesn't work with system.js)
import { AlertModule } from 'ngx-bootstrap/alert';
// or
import { AlertModule } from 'ngx-bootstrap';

  imports: [AlertModule.forRoot(),...]
export class AppModule(){}

After importing the AlertModule, you can simply use it in your component like shown below.

This will be component file.

import { Component } from '@angular/core';
  selector: 'demo-alert-basic',
  templateUrl: './basic.html'
export class DemoAlertBasicComponent {}

This will be template file.

<alert type="success">
  <strong>Well done!</strong> You successfully read this important alert message.
<alert type="info">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
<alert type="warning">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
<alert type="danger">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.

That’s it, now you can see the alerts in your browser window.

Use of Buttons

Same as alerts, you can start using buttons by importing the ButtonsModule in your main module.

// RECOMMENDED (doesn't work with system.js)
import { ButtonsModule } from 'ngx-bootstrap/buttons';
// or
import { ButtonsModule } from 'ngx-bootstrap';

  imports: [ButtonsModule.forRoot(),...]
export class AppModule(){}

Now, after importing you just need to use it in your components.

This gonna be your template file.

<button type="button" class="btn btn-primary" [(ngModel)]="singleModel">
  Click Me!

Here we go, it’s simple, right ?

Like alerts and buttons, we can also use other components like Accordion, Collapse, Datepicker, Modal, and many more. You can find the complete list of examples over here.

It’s just cup of coffee to start using bootstrap in angular apps with ngx-bootstrap. Enjoy!

Leave a Reply

Notify of