@ng-bootstrap/ng-bootstrap

Angular widgets built from scratch using Bootstrap CSS — no jQuery, no Popper.js, just pure Angular components.

@ng-bootstrap/ng-bootstrap

Angular

Angular widgets built from scratch using Bootstrap CSS — no jQuery, no Popper.js, just pure Angular components.

npm GitHub Docs

Fit

Bundle (gzip)

54.8 kB

284.0 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Using Bootstrap with Angular means fighting jQuery's DOM manipulation model against Angular's change detection. ngx-bootstrap and similar ports often lag behind Bootstrap's CSS updates and have inconsistent Angular integration.

What It Does

@ng-bootstrap/ng-bootstrap reimplements Bootstrap's interactive components (modals, tooltips, dropdowns, date pickers, etc.) as pure Angular components and directives. They use Bootstrap's CSS directly but are driven entirely by Angular, with full TypeScript support and no runtime DOM libraries.

Installation

bash

npm install @ng-bootstrap/ng-bootstrap bootstrap

Usage Example

typescript

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

@NgModule({ imports: [NgbModalModule] })
export class AppModule {}

typescript

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

@Component({ template: `<button (click)="open()">Open Modal</button>` })
export class AppComponent {
  constructor(private modal: NgbModal) {}

  open() {
    this.modal.open(MyModalComponent);
  }
}

Related packages

@angular/cdkAngular

Angular Component Dev Kit — a set of behavior primitives for building accessible, high-quality UI components without prescribing any visual style.

@angular/materialAngular

Official Material Design component library for Angular — 30+ accessible, themeable UI components built for Angular's ecosystem.

ng-zorro-antdAngular

Enterprise-grade UI component library for Angular based on Ant Design — 60+ production-ready components with a polished design system.

@ngneat/until-destroyAngular

Automatic RxJS subscription cleanup for Angular components — no more manual unsubscribe logic in ngOnDestroy.

@ngrx/storeAngular

Reactive state management for Angular apps built on RxJS — a predictable, unidirectional data flow inspired by Redux.