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.

or

Install Bootstrap using Node Package Manager (NPM) with the following command.

Step 2

Now install the ngx-bootstrap by using the following command.

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

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.

app.module.ts

Step 4

Add the below Datepicker code in your app.component.html

Output

ngx-bootstrap datepicker output format

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

angular.json

Step 2

Use the following command for Popover component and this will import the component automatically in the app.module.ts

app.module.ts

Step 3

Add the below Popover code in your app.component.html

Output:

ngx-bootstrap-Popover-example.jpg

ngx-bootstrap components command list.

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.

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top

DON’T MISS ANY UPDATE

Get notified about the next update

Pin It on Pinterest