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

Programming & Frameworks

Topics Covered
  • C Programming and Data Structures (41 Blogs)
  • Comprehensive Java Course (2 Blogs)
  • Java/J2EE and SOA (324 Blogs)
  • Spring Framework (8 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

What is ngx boostrap and how to use it?

Published on Oct 23,2019 36 Views
9 / 12 Blog from Boostrap

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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

@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.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
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.