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 - 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.
Leave a reply

Sign in to stay updated on your professional world.
Pro Code Programming
Share and learn to code!
Programming articles, which helps you to build your application.
If something you are stuck to code and complete the program, just find here your quetion related articles.
New to Pro Code Programming?