The Ngx-Bootstrap is a very popular library to use bootstrap components in Angular Based projects. It contains almost all core components of Bootstrap. ngx-bootstrap components are by design modular, extensible and adaptable.
Audience
This tutorial is designed for software programmers who want to learn the basics of ngx-bootstrap and its concepts in a simple and easy manner. This tutorial will give you enough understanding of the various functionalities of ngx-bootstrap with suitable examples.
Prerequisites
Before proceeding with this tutorial, you should have a basic understanding of Node and Angular.
Overview
The ngx-bootstrap is a very popular library to use bootstrap components in Angular Based projects. It contains almost all core components of Bootstrap. ngx-bootstrap components are by design modular, extensible and adaptable. Following are the key highlighting points of this bootstrap library.
Flexibility
- All components are modular by design. Custom templates, Styles can be applied easily.
- All components are extensible and adaptable and works on desktop and mobile with same ease and performance.
Support
- All components uses latest style guides and guidelines for code maintainability and readablity.
- All components are fully unit tested and supports latest angular versions.
Extensive Documentation
- All components are richly documented and well written.
- All components are have multiple working demos to exihibits multiple types of functionalities.
Open Source
- ngx-bootstrap is open source project. It is backed by MIT License.
Environment Setup
In this chapter, you will learn in detail about setting up the working environment of ngx-bootstrap on your local computer. As ngx-bootstrap is primarily for angular projects, make sure you have Node.js and npm and angular installed on your system.
Create an angular project
First, create an angular project to test ngx-bootstrap components using the following commands.
ng new ngxbootstrap
It will create an angular project named ng bootstrap.
Add ngx-bootstrap as dependency
You can use the following command to install ngx-bootstrap in the newly created project−
npm install ngx-bootstrap
You can observe the following output once ngx-bootstrap is successfully installed −
+ ngx-bootstrap@5.6.1 added 1 package from 1 contributor and audited 1454 packages in 16.743s
Now, to test if bootstrap works fine with Node.js, create the test component using the following command −
ng g component test CREATE src/app/test/test.component.html (19 bytes) CREATE src/app/test/test.component.spec.ts (614 bytes) CREATE src/app/test/test.component.ts (267 bytes) CREATE src/app/test/test.component.css (0 bytes) UPDATE src/app/app.module.ts (388 bytes)
Clear content of app.component.html and update it following contents.
app.component.html
<app-test></app-test>
Update content of app.module.ts to include the ngx-bootstrap accordion module. We’ll add another module in subsequent chapters. Update it following contents.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion'
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
AccordionModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Update content of index.html to include bootstrap.css. Update it following contents.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ngxbootstrap</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
In the next chapter, we’ll update the test component to use ngx-bootstrap components.
Next Topic; Click Here
Pingback: Ngx-Bootstrap - Typeahead | Adglob Infosystem Pvt Ltd
Enjoyed every bit of your post.Thanks Again. Great.