Share and Learn To Write Code!

NG Bootstrap - Angular powered Bootstrap widgets

Angular widgets like modal, dropdown, carousel etc widgets need to use sometime 3rd party js libraries. But NG bootstrap is supported to angular any version and is also build from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem.

Installation

To install ng-bootstrap some prerequisite needed.

Prerequisite

Angular Cli. Install using help of article.

Bootstrap 4 CSS already install in angular Cli. If you dont know how to setup bootstrap 4 in angular cli click here to see article.

Setup

To install NG Bootstrap in angular current project, then install using npm.

npm install --save @ng-bootstrap/ng-bootstrap

Once installed you need to import main module

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
@NgModule({
  ...
  imports: [NgbModule, ...],
  ...
})
export class YourAppModule {
}

Alternatively you could only import modules with components you need, ex. pagination and alert. The resulting bundle will be smaller in this case.

import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';
 
@NgModule({
  ...
  imports: [NgbPaginationModule, NgbAlertModule, ...],
  ...
})
export class YourAppModule {
}

Example

To see example of Modal popup using NG Bootstrap click here to see example.

Thank you for watching article.