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.


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.


0replies
Leave a reply
46
Registerd Users
88
Total Subscribers
59
Total Articles
42093
Total Views