Angular ngx Bootstrap Introduction

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:

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” rel=”stylesheet”>

• 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

<div class="text-center">
    <h1>GeeksforGeeks</h1>
    <h3>Angular ngx Bootstrap Example</h3>
    <button type="button"
            class="btn btn-secondary"
            [disabled]="grp"
            (click)="gfg1 = !gfg1"
            aria-controls="geeks1">
        Disabled Button
    </button>
    <button type="button"
            class="btn btn-primary active"
            tooltip="Active Button"
            placement="top"
            (click)="gfg1 = !gfg1"
            aria-controls="geeks1">
      Button
    </button>
    <button type="button"
            class="btn btn-danger active"
            tooltip="Click Here to toggle the view"
            placement="bottom"
            (click)="gfg = !gfg"
            aria-controls="geeks">
      Click to collapse!
    </button>
    <div id="geeks"
         [collapse]="gfg">
        <div class="well well-lg card card-block card-header">
            DSA Self Paced Course is specifically designed
            for beginners, whether it be students or working
            professionals, who want to learn the Data Structures,
            can easily learn the concepts.
        </div>
    </div>
</div>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1" />
    <link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          rel="stylesheet" />
    <link rel="icon"
          type="image/x-icon"
          href="favicon.ico" />
    <link rel="preconnect"
          href="https://fonts.gstatic.com" />
    <link href=
"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
          rel="stylesheet" />
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet" />
</head>

<body class="mat-typography">
    <app-root></app-root>
</body>
</html>

Output:

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

app.component.html

<div class="text-center">
  <h1>GeeksforGeeks</h1>
  <h3>Angular ngx Bootstrap Example</h3>
  <div class="btn-group">
    <label class="btn btn-primary"
           role="button">Left
       </label>
    <label class="btn btn-primary"
           role="button">Central
       </label>
    <label class="btn btn-primary"
           role="button">Right
       </label>
  </div>
</div>

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: