@angular-bootstrap/ngbootstrap

Angular UI library providing Datagrid, Drag‑and‑drop, Pagination, Stepper, Splitter, Tree, Typeahead, and Chips components with Bootstrap‑friendly styling.

Features

• Datagrid – sortable, filterable, paginated, Sticky Header/Footer, Sticky Rows, Grid Styling, editable table with export (PDF/Excel) support and accessible templates.
• Drag & drop – lightweight list and item directives with keyboard‑friendly a11y helpers.
• Pagination – standalone Bootstrap‑styled pagination component.
• Stepper – horizontal/vertical stepper with custom labels, error states, theming hooks, and keyboard support.
• Splitter – resizable horizontal/vertical panes with collapsing, keyboard resizing, and ARIA semantics.
• Tree – keyboard-accessible tree with optional checkboxes, JSON-style expanders, and expand/collapse helpers.
• Typeahead – Bootstrap dropdown overlay with debouncing, virtualization, single/multi select, chips/tags mode, custom templates, and Reactive Forms support.
• Chips – small reusable chips/tags component used by Typeahead (can also be used standalone).
• Angular + Bootstrap first – built for modern Angular (v21) and works with plain Bootstrap CSS; Material/Tailwind can be layered via custom styles.

Installation

npm install @angular-bootstrap/ngbootstrap

Make sure your app:

• Uses Angular 21 (peer deps: >=21 <22).
• Includes Bootstrap CSS + Bootstrap Icons (for example in angular.json or global styles):

@import 'bootstrap/dist/css/bootstrap.min.css';
@import 'bootstrap-icons/font/bootstrap-icons.css';

Usage overview

All components are standalone, so you import them directly into your feature components.

Key datagrid capabilities:

• Sorting (enableSorting, sortChange).
• Column/global filtering (enableFiltering, enableGlobalFilter, filtersChange).
• Pagination (enablePagination, pageSize, pageChange).
• Inline add/edit/delete (enableAdd, enableEdit, enableDelete, rowAdd, rowSave, rowDelete).
• Stable row identity via trackBy (defaults to index).
• Pluggable editing logic via editService (implement NgbDatagridEditService).
• Export to PDF/Excel via exportOptions.

Export requires optional peer dependencies. Install only if you use export:

npm install jspdf jspdf-autotable xlsx

Stepper highlights:

• Horizontal/vertical variants via orientation.
• Custom labels with the ngbStepLabel directive.
• Label and content positioning (labelPosition, contentPosition).
• Error states and messages (errorMessage on steps).
• Controlled navigation (allowRevisit, next(), prev(), reset() and events).
• Theming hooks via theme and CSS classes (bootstrap, material, tailwind).

Refer to the source under src/drag-drop and src/datagrid/src/stepper for full API details until a dedicated docs site is added.

Development

Local setup:

npm install
npm run lint
npm test
npm run build

• Build artefacts go to dist/.
• Tests are powered by Jest + jest-preset-angular.

Releasing

Releases are automated via GitHub Actions:

• Non‑main branches:
  • .github/workflows/ci.yml runs install, tests, build only.
• main branch:
  • .github/workflows/release.yml runs install, tests, build and publishes to npm using NPM_TOKEN from repository secrets.

Recommended release flow:

• On your local machine:
  • Decide the new version (e.g. 1.1.0).
  • Run npm version minor or npm version patch to bump package.json and create the tag.
  • Push the commit and tag: git push origin main --tags.
• GitHub Actions will build and publish that tagged version to npm.