@angular-bootstrap/ngbootstrap

Standalone Angular UI components with Bootstrap-friendly styling.

What Is Included

• DataGrid
• Pagination
• Typeahead
• Tree
• Splitter
• Stepper
• Chips
• Drag and drop

Requirements

• Angular >=21.0.0 <23.0.0
• RxJS ^7.8.0
• Bootstrap CSS in the consuming app
• Bootstrap Icons when icon-based examples are used

Install

npm install @angular-bootstrap/ngbootstrap bootstrap bootstrap-icons

Optional integrations are installed only when you use those features:

npm install chart.js jspdf jspdf-autotable xlsx

Use

Import standalone components directly in your Angular component.

import { Component } from '@angular/core';
import { NgbDatagridComponent, type ColumnDef } from '@angular-bootstrap/ngbootstrap';

@Component({
  selector: 'app-users-grid',
  standalone: true,
  imports: [NgbDatagridComponent],
  template: `
    <ngb-datagrid
      [data]="users"
      [columns]="columns"
      [enableSorting]="true"
      filterable="row"
      [enablePagination]="true"
      [pageSize]="10"
    />
  `,
})
export class UsersGridComponent {
  users = [
    { id: 1, name: 'Ava Patel', role: 'Admin' },
    { id: 2, name: 'Noah Chen', role: 'Editor' },
  ];

  columns: ColumnDef[] = [
    { field: 'id', header: 'ID', type: 'number', width: 90, sortable: true },
    { field: 'name', header: 'Name', type: 'text', sortable: true, filterable: true },
    { field: 'role', header: 'Role', type: 'text', filterable: true },
  ];
}

Development

pnpm install
pnpm test
pnpm build

Build output is written to dist/.