Angular ngx Bootstrap Introduction (original) (raw)

Last Updated : 23 Jul, 2025

**Angular ngx Bootstrap is an open-source (MIT Licensed) project, that provides Bootstrap components powered by Angular, which does not require including any original JS components. This framework facilitates the creation of components with great styling with very easy to use, which, in turn, helps to make interactive & responsive websites or web applications. In this article, we will know an overview of ngx Bootstrap, its basic syntax & installation procedure, along with understanding its implementation through the examples.

The **ngx Bootstrap facilitates the different kinds of components for fulfilling the different purposes, such as the _Alert Component can be used to provide contextual feedback messages for typical user actions with the handful of available, the _Rating Component can be used to make a component that will be shown by using stars, the _Progressbar Component can be used to provide up-to-date feedback on the progress of the work, etc. These components utilize the respective APIs to perform the specific task. Using these components in the angular project can help to create an attractive web application, along with enhancing overall interactivity to the site or app.

**Installation Syntax:

npm install ngx-bootstrap --save

**Steps for installing Angular ngx Bootstrap: Before we proceed to install the Angular ngx Bootstrap, we must have installed the Angular CLI in the system. Please refer to the Angular CLI Angular Project Setup article for the detailed installation procedure. Make sure the Angular CLI & Node Package Manager is installed properly. To check the version installed, run the below commands:

• For NodeJS version:

node --version

• For the NPM version:

npm -V OR npm --version

• For Angular CLI version:

ng -V or ng --version

**Project Structure: After successful installation, the following project structure will appear:

Project Structure

**Steps for creation of Angular ngx Bootstrap Component:

• Install the angular ngx bootstrap using the above-mentioned Installation command.
• Import the required package to NgModule imports in the _app.module.ts file:

import { TooltipModule } from 'ngx-bootstrap/tooltip';

@NgModule({
...
imports: [ TooltipModule.forRoot(), … ]
...
})

• Add the following script in _index.html:

• Add the specific component(that is to be used) to your _app.component.html file.
• Run the application using the below command:

ng serve

It will render the app in http://localhost:4200/ automatically.

**Example: This example illustrates the implementation of Angular ngx Bootstrap.

app.component.html `

app.component.ts

import { Component } from '@angular/core';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { gfg = false; gfg1 = false; grp="true"; }

app.module.ts

import { NgModule } from "@angular/core"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { BrowserModule } from "@angular/platform-browser"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { AlertModule } from "ngx-bootstrap/alert"; import { TooltipModule } from "ngx-bootstrap/tooltip"; import { CollapseModule } from "ngx-bootstrap/collapse"; import { AppComponent } from "./app.component";

@NgModule({ bootstrap: [AppComponent], declarations: [AppComponent], imports: [ FormsModule, BrowserModule, BrowserAnimationsModule, ReactiveFormsModule, AlertModule.forRoot(), TooltipModule.forRoot(), CollapseModule.forRoot(), ], }) export class AppModule {}

index.html

`

**Output:

**Example 2: This example describes the grouped Button Components in Angular ngx Bootstrap.

app.component.html `

app.component.ts

import { Component } from "@angular/core";

@Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent {}

app.module.ts

import { NgModule } from "@angular/core";

import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { BrowserModule } from "@angular/platform-browser"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { ButtonsModule } from "ngx-bootstrap/buttons";

import { AppComponent } from "./app.component";

@NgModule({ bootstrap: [AppComponent], declarations: [AppComponent], imports: [ FormsModule, BrowserModule, BrowserAnimationsModule, ReactiveFormsModule, ButtonsModule.forRoot(), ], }) export class AppModule {}

`

**Output: