Share and Learn To Write Code!

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

Share with   

How to install @ng-bootstrap to angular cli and uses of @ng-bootstrap

Here we are going to install ng-bootstrap in the angular cli and we re also going to see some examples of ng-bootstrap.
ng-bootstrap   bootstrap 4   angular 7   angular 8   javascript  

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.


To install ng-bootstrap some prerequisite needed.


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.


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';
  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';
  imports: [NgbPaginationModule, NgbAlertModule, ...],
export class YourAppModule {


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

Thank you for watching article.

Leave a reply
Registerd Users
Total Subscribers
Total Articles
Total Views