Angular UI library providing datagrid, drag-and-drop, pagination, stepper, splitter, typeahead and chips components with Bootstrap-friendly styling.
npm install @angular-bootstrap/ngbootstrapAngular UI library providing Datagrid, Drag‑and‑drop, Pagination, Stepper, Splitter, Tree, Typeahead, and Chips components with Bootstrap‑friendly styling.
- 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.
``bash`
npm install @angular-bootstrap/ngbootstrap
Make sure your app:
- Uses Angular 21 (peer deps: >=21 <22).angular.json
- Includes Bootstrap CSS + Bootstrap Icons (for example in or global styles):
`css`
@import 'bootstrap/dist/css/bootstrap.min.css';
@import 'bootstrap-icons/font/bootstrap-icons.css';
All components are standalone, so you import them directly into your feature components.
Key datagrid capabilities:
- Sorting (enableSorting, sortChange).enableFiltering
- Column/global filtering (, enableGlobalFilter, filtersChange).enablePagination
- Pagination (, pageSize, pageChange).enableAdd
- Inline add/edit/delete (, enableEdit, enableDelete, rowAdd, rowSave, rowDelete).trackBy
- Stable row identity via (defaults to index).editService
- Pluggable editing logic via (implement NgbDatagridEditService).exportOptions
- Export to PDF/Excel via .
Export requires optional peer dependencies. Install only if you use export:
`sh`
npm install jspdf jspdf-autotable xlsx
Stepper highlights:
- Horizontal/vertical variants via orientation.ngbStepLabel
- Custom labels with the directive.labelPosition
- Label and content positioning (, contentPosition).errorMessage
- Error states and messages ( on steps).allowRevisit
- Controlled navigation (, next(), prev(), reset() and events).theme
- Theming hooks via 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.
Local setup:
`bash`
npm install
npm run lint
npm test
npm run build
- Build artefacts go to dist/.jest-preset-angular
- Tests are powered by Jest + .
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).npm version minor
- Run or npm version patch to bump package.json and create the tag.git push origin main --tags`.
- Push the commit and tag:
- GitHub Actions will build and publish that tagged version to npm.