Full Stack Developer Masters Program (57 Blogs) Become a Certified Professional
AWS Global Infrastructure

Programming & Frameworks

Topics Covered
  • C Programming and Data Structures (16 Blogs)
  • Comprehensive Java Course (4 Blogs)
  • Java/J2EE and SOA (345 Blogs)
  • Spring Framework (8 Blogs)

What is ngx boostrap and how to use it?

Last updated on May 04,2020 3.5K Views

9 / 12 Blog from Boostrap

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:

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';

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

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


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';
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.

Upcoming Batches For Full Stack Developer Course
Course NameDateDetails
Full Stack Developer Course

Class Starts on 20th April,2024

20th April

SAT&SUN (Weekend Batch)
View Details

Join the discussion

Browse Categories

webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

What is ngx boostrap and how to use it?