Introduction to ngx Bootstrap

In this blog, I want to tell about ngx-Bootstrap and how we can use it in Angular and ngx bootstrap is a straightforward way to define all bootstrap CSS and js thing in angular so let's start how we can add ngx-bootstrap in our angular project.The NGX-Bootstrap includes all the core (and not only), which are bootstrap components powered by angular. So you do not need to include the original JS components, but we are using markup and CSS provided by bootstrap.

Introduction
If you are just using Bootstrap's CSS then proceed If you want to use JS components written in angular, then we can use ng bootstrap, and it provides easy ways to interact with components.

The NGX-Bootstrap includes all core (and not only) angular powered bootstrap components. So we do not need to include the original JS components, but we are using markup and CSS provided by bootstrap.

How to Install NGX-Bootstrap:-

There are two type 
1. you can install ngx-bootstrap from npm

npm install ngx-bootstrap --save

2.you can use CDN Link of bootstrap style and JS Functionalty.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

NGX-Bootstrap available for bootstrap 4 and 3 version and after that how we can add in our project.

Manually set up bootstrap version:-

Sometimes, your project may have some libraries that can interfere with the bootstrap framework, or you may have a customized version of the bootstrap. The result is that the process of determining the bootstrap version can fail, which can break the UI. In that case, we can still set the bootstrap version manually to the BootGraping component (i.e. AppComonent):

import { setTheme } from 'ngx-bootstrap/utils';
 
@Component({…})
export class AppComponent {
  constructor() {
    setTheme('bs3'); // or 'bs4'
    …
  }
}

Usage & Demo:-

Some example are ngx bootstrap  like:

Here are list of component those are provided by ngx-bootstrap:-
1.    alerts
2.    buttons
3.    carousel
4.    collapse
5.    datepicker
6.    dropdowns
7.    modals
8.    pagination
9.    popover

And many example are there we can use through ngx-bootstrap.