How to add ngx-bootstrap with Angular CLI project
In this article, we going to see how to add ngx-bootstrap with Angular CLI project. One of the main advantage in ngx-bootstrap is you can use the Bootstrap components without the jQuery library. The ngx-bootstrap components are powered by Angular, without jQuery or popper.js you can use the components like accordion, alerts, buttons, carousel, tooltips or any other component. The following steps help you to implement ngx-bootstrap in your Angular project.
Creating an Angular project with Angular CLI.
Before installing Bootstrap first you need to create your Angular project using Angular CLI, for that here you have an article.
Install Bootstrap using ngx-bootstrap with Angular CLI project.
Once you completed the installation of Angular now let’s install the ngx-bootstrap. Here you have two methods to install ngx-bootstrap one is you need to install separately with Bootstrap and ngx-bootstrap commands and you required to add in your angular.json inside the styles[] another with adding ngx-bootstrap command, this will automatically installed dependency files in your Angular project. The following steps explain to you with these two separations clearly.
If you like to install Bootstrap without ngx-bootstrap, here you have an article.
Installation ngx-bootstrap Method 1
Install all the required files for your Angular project by using the following steps.
Step 1
Use the Bootstrap through CDN or NPM, the best way to use a Bootstrap is using NPM, that only gives the best output for your Angular project.
Copy and past in your Angular index.html page between the head tag.
|
1 2 |
<!--- Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> |
or
Install Bootstrap using Node Package Manager (NPM) with the following command.
|
1 |
npm install bootstrap --save |
Step 2
Now install the ngx-bootstrap by using the following command.
|
1 |
npm install ngx-bootstrap --save |
Note: Once installed both Bootstrap and ngx-bootstrap, now you need to add components that you required for your Angular project. In this example, I used datepicker component and added the file path of bootstrap and ngx-bootstrap datepicker components in angular.json inside the styles[] like the below code.
angular.json
|
1 2 3 4 5 |
"styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "src/styles.css" ], |
Step 3
Through the ngx-bootstrap and add the modules that you required in your app.module.ts. For example, If you like to use datepicker means you need to add the following command, this will automatically import files in app.module.ts like the below code.
Click here to see all the components in ngx-bootstrap.
|
1 |
ng add ngx-bootstrap --component datepicker |
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, BsDatepickerModule.forRoot(), ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Step 4
Add the below Datepicker code in your app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="row"> <div class="col-xs-12 col-12 col-md-4 form-group"> <input type="text" placeholder="Datepicker" class="form-control" bsDatepicker> </div> <div class="col-xs-12 col-12 col-md-4 form-group"> <input type="text" placeholder="Daterangepicker" class="form-control" bsDaterangepicker> </div> </div> |
Output
Installation ngx-bootstrap Method 2 (Recommended)
In this method, you can easily do all the process in additional ngx-bootstrap you can install the Bootstrap and ngx-bootstrap automatically in your angular.json by using the following command.
Step 1
|
1 |
ng add ngx-bootstrap |
angular.json
|
1 2 3 4 5 |
"styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "src/styles.css" ], |
Step 2
Use the following command for Popover component and this will import the component automatically in the app.module.ts
|
1 |
ng add ngx-bootstrap --component popover |
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; import { PopoverModule } from 'ngx-bootstrap/popover'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, BsDatepickerModule.forRoot(), PopoverModule.forRoot(), ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Step 3
Add the below Popover code in your app.component.html
|
1 2 3 4 5 6 7 |
<button type="button" class="btn btn-default btn-secondary" popover="SoftAOX best tutorials" popoverTitle="Popover on top" [adaptivePosition]="false" placement="top"> Popover on top </button> |
Output:
ngx-bootstrap components command list.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ng add ngx-bootstrap --component accordion ng add ngx-bootstrap --component alerts ng add ngx-bootstrap --component buttons ng add ngx-bootstrap --component carousel ng add ngx-bootstrap --component collapse ng add ngx-bootstrap --component datepicker ng add ngx-bootstrap --component dropdowns ng add ngx-bootstrap --component modals ng add ngx-bootstrap --component pagination ng add ngx-bootstrap --component popover ng add ngx-bootstrap --component progressbar ng add ngx-bootstrap --component rating ng add ngx-bootstrap --component sortable ng add ngx-bootstrap --component tabs ng add ngx-bootstrap --component timepicker ng add ngx-bootstrap --component tooltip ng add ngx-bootstrap --component typeahead |
Conclusion:
I hope this article will help you. Here we did all kind of the process to install the ngx-bootstrap, so kindly give your feedback in the comments which helps me to improve myself for the next articles. If you have any doubts please ask in the comment section and If you like this article, please share it with your friends. Thanks a lot.
