Full Stack Web Development Internship Program
- 29k Enrolled Learners
- Weekend/Weekday
- Live Class
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.
To start with the basics, let’s learn how to install ngx bootstrap!
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:
<!--- index.html → <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!--- index.html → <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
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>
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.
When you’re building the library for the first time, you can,
To update your fork and prepare it for local usage, you can use the following codes:
To run the demo:
For local development run, use the following codes:
Using Angular Universal to run a demo:
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.
Course Name | Date | Details |
---|---|---|
Full Stack Web Development Course | Class Starts on 2nd November,2024 2nd November SAT&SUN (Weekend Batch) | View Details |
edureka.co