What is ngx boostrap and how to use it?

An ngx bootstrap is an open-source tool that is an independent project with on-going development. You can exclude your original JavaScript component and just use the markup and CSS framework provided by Bootstrap.

In this blog, you will learn about:

• Installation of ngx bootstrap
• Manually setting up Bootstrap
• Building a library

Let’s begin.

Installation of ngx bootstrap

To start with the basics, let’s learn how to install ngx bootstrap!

Method 1

Using npm to install ngx bootstrap

Npm install ngx-bootstrap --save

Add the necessary packages required to NgModule imports:

import { TooltipModule } from 'ngx-bootstrap/tooltip';

@NgModule({
...
imports: [TooltipModule.forRoot(),...]
...
})

Add the required components to the page:

<button type="button" class="btn btn-primary" tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Simple demo
</button>

Add the bootstrap styles required:

• Bootstrap 3:

<!--- index.html &rarr;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

• Bootstrap 4:

<!--- index.html &rarr;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

Method 2

To update your Angular Project, use the Angular CLI ng add command

ng add ngx-bootstrap

Or you can also use the ng add command to add the needed component (or example – tooltip)

ng add ngx-bootstrap --component tooltip

Add the necessary components required for your page:

<button type="button" class="btn btn-primary" tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Simple demo
</button>

Manually setting up ngx bootstrap

Your project might have a different set of libraries used that could interfere with the bootstrap framework or you might have customized your bootstrap framework. When the library doesn’t support your version of bootstrap, there might be a break in the user interface. To avoid this, you can set up the bootstrap version manually using the AddComponent code:

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

Next, let’s learn how to build the library for development.

Building the library

When you’re building the library for the first time, you can,

• clone repository
• npm install
• npm run build

To update your fork and prepare it for local usage, you can use the following codes:

• git pull upstream development
• rm -rf node_modules
• npm install
• npm run build

To run the demo:

• npm run demo.serve // to serve local demo. This is for testing only, without watchers.

For local development run, use the following codes:

• npm run build.watch // in first terminal
• ng serve // in second

Using Angular Universal to run a demo:

• npm run demo.serve-universal

Hope this blog on ngx bootstrap was useful. In case of any queries, drop in your comments below!

With this, we have come to the end of this article. I hope you understood what is bootstrap pagination and what are the different types of pagination.

Check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3). 

Got a question for us? Please mention it in the comments section of this blog and we will get back to you.