NGX Bootstrap and its usage
So, let’s start with what exactly is ngx bootstrap?
The Ngx-Bootstrap is one of the very popular libraries that is required to use bootstrap components in Angular Based projects. It consists of almost all core components of Bootstrap.
Ngx bootstrap is an open-source tool. It is an independent project, and the development is still ongoing. The original JavaScript component can be excluded, and just the markup and CSS framework provided by Bootstrap can be used in the projects.
The components of ngx-bootstrap are known to be modular, extensible, and adaptable.
The key highlighting points of the bootstrap library that make it popular are:
Flexibility
All components of ngx bootstrap are modular by design. Therefore, one can very easily apply the custom templates, styles.
The components are also extensible and adaptable. Moreover, it works on desktop and mobile with the same ease and performance.
Support
The components of ngx bootstrap are unit tested properly, and they support the latest angular versions.
To maintain code and its readability, components of ngx bootstrap uses the latest style guidelines.
Extensive Documentation
The components of ngx bootstrap are very well written and documented.
To exhibit multiple type of functionalities, there are multiple working demos for the same.
Open Source
ngx-bootstrap has MIT License and is the most commonly used open source project.
The major topics that would be covered in this article are:
- Installation of NGX Bootstrap
- Manually setting up Bootstrap
- Building a library
Let’s discuss these topics one by one:
Installation of NGX bootstrap
Let’s start with the installation of ngx bootstrap.
There are two methods for installing ngx bootstrap.
Method 1
The first method is to Install ngx-bootstrap from npm package
npm install ngx-bootstrap –save
Create test component to test that bootstrap works fine with node.js:
Then add necessary packages to ngmodule imports
import { TooltipModule } from ‘ngx-bootstrap/tooltip’;
@NgModule({
…
imports: [TooltipModule.forRoot(),…]
…
})
Then add the bootstrap styles that are required in the project
Bootstrap 3
<!– index.html –>
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=”stylesheet”>
Bootstrap 4
<!— index.html –>
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” rel=”stylesheet”>
Method 2
First let us see how we can install Angular CLI. Below are the commands:
There is another method to install ngx-boostrap, that is through Angular CLI ng add command.
ng add command updates the Angular project with the necessary ngx-bootstrap dependencies It make changes to package.json, angular.json and also executes initialization code.
ng add ngx-bootstrap
ng add ngx-bootstrap –component componentName
ng add download dependencies for ngx-bootstrap using the package manager. Then, it invokes an installation script (implemented as a schematic) that updates the project and adds additional dependencies (for example, styles).
Below is the list of possible commands that is required for adding appropriate component
ng add ngx-bootstrap –component accordion
ng add ngx-bootstrap –component alerts
ng add ngx-bootstrap –component buttons
ng add ngx-bootstrap –component carousel
ng add ngx-bootstrap –component collapse
ng add ngx-bootstrap –component datepicker
ng add ngx-bootstrap –component dropdowns
ng add ngx-bootstrap –component modals
ng add ngx-bootstrap –component pagination
ng add ngx-bootstrap –component popover
ng add ngx-bootstrap –component progressbar
ng add ngx-bootstrap –component rating
ng add ngx-bootstrap –component sortable
ng add ngx-bootstrap –component tabs
ng add ngx-bootstrap –component timepicker
ng add ngx-bootstrap –component tooltip
ng add ngx-bootstrap –component typeahead
Manually Setting Up NGX Bootstrap
It can happen that sometimes the project may contain some library that could interfere with the bootstrap framework, or there is a customized version of bootstrap in the project.
As a result, in the process of determining bootstrap version there may be failure, which can result in breaking of the UI.
In this scenario, we can set the bootstrap version manually in the bootstrapping component using AppComponent code.
import { setTheme } from ‘ngx-bootstrap/utils’;
@Component({…})
export class AppComponent {
constructor() {
setTheme(‘bs3’); // or ‘bs4’
…
}
}
Now, let’s move on to how to build the library
Building the Library
While building the library for the first time, the below steps can be followed
- clone repository
- npm install
- npm run build
Below mentioned codes can be used to update the fork and prepare it for local usage
git pull upstream development
rm -rf node_modules
npm install
npm run build
Users can run the demo using below code:
npm run demo.serve // to serve local demo. This is meant for testing only and without watchers.
If the user wants to run local development, the following codes can be used:
npm run build.watch // to be executed in first terminal
ng serve // to be executed in the first terminal. Once the server is up, the following output is displayed.
If the user wish to run demo using Angular universe, below code can be used:
npm run demo.serve-universal
Compatibility
The version compatibility of Angular and Bootstrap CSS is as below
| ngx-bootstrap | Angular | Bootstrap CSS |
| 6.0.0 | 9.x.x – 10.x.x | 3.x.x or 4.x.x |
| 5.6.x | 7.x.x – 9.1.0 | 3.x.x or 4.x.x |
| 5.0.0 – 5.6.0 | 7.x.x – 8.x.x | 3.x.x or 4.x.x |
| 4.x.x | 6.x.x – 7.x.x | 3.x.x or 4.x.x |
| 3.x.x | 6.x.x – 7.x.x | 3.x.x or 4.x.x |
| 2.x.x | 2.x.x – 4.x.x | 3.x.x or 4.x.x |
| 1.x.x | 2.x.x | 3.x.x or 4.x.x |
Now we have fair idea about ngx-bootstrap, installation, its components. Let’s go deep into the components of ngx-bootstrap.
NGX Bootstrap Components
- ngx bootstrap Accordion
This component is used if a user wants to display the collapsible content panels for presenting information in a limited amount of space.
TEMPLATE
COMPONENT
- ngx Bootstrap Alert
It is used to display alert messages or feedback from users.
- ngx Bootstrap Carasoul
It is used to show images or tests in the form of the slide show.
- ngx Bootstrap datepicker
It adds date picker functionality to the webpage that the user has created.
- ngx Bootstrap dropdown
This component is used to display dropdown list.
There are other components also that are supported by ngx bootstrap ( captured above). So keep trying and practicing the components to learn how vast ngx-bootstrap is. We hope that you found this helpful. If you wish to learn more such concepts, join Great Learning Academy’s Free Online Courses and upskill today.
Happy Learning!!!
