Angular Application using ng-bootstrap

While working on an Angular application, we may sometimes look for features provided by the Bootstrap framework, but in the form of Angular components, which can be achieved by using ng-bootstrap.

This library exposes the Bootstrap components (like Carousel, modal, popover, tooltip, etc.,) in the form of Angular components, so it is easy for Angular developers to use it.

Let's look at how we can install and use it in an Angular application.

Install ng-bootstrap

Run the below command within a terminal to add ng-bootstrap to the Angular application.

> ng add @ng-bootstrap/ng-bootstrap

Import Components

After installing ng-bootstrap, add the module NgbModule to the list of imports specified in the app.module.ts file as shown below. This includes all the components and features from the ng-bootstrap library in the application.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule],
})
export class YourAppModule {
}

In case, if we only need certain components (like pagination, alert, etc.,), then import only those components, which helps us in reducing the build size.

This makes the imported components available for all the components of the YourAppModule module.

import { NgbPaginationModule, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    imports: [NgbPaginationModule, NgbAlertModule],
})
export class YourAppModule {
}

Also, as the ng-bootstrap components are standalone components, they can even be imported directly into an Angular component as shown below.

This makes the imported component available only for the component UserComponent on which it is imported.

import { Component } from '@angular/core';
import { NgbAlert } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'app-user',
    standalone: true,
    imports: [NgbAlert],
    templateUrl: './user.component.html'
})
export class UserComponent {
}

Use Components

Use the component within the HTML file as shown below.

<p>
    <ngb-alert [dismissible]="false">
        <strong>Warning!</strong> This is a warning message from ng-bootstrap library.
    </ngb-alert>
</p>

<p>
    <ngb-alert [dismissible]="true">
        <strong>Warning!</strong> This is a warning message from ng-bootstrap library.
    </ngb-alert>
</p>

How does it look on the UI?

After using the components in an Angular application, run the application to see the below reflecting on the application.

Conclusion

Now, we know how to install and use ng-bootstrap in an Angular application.