Posted inAngular Bootstrap Web

Introducing ngbootstrap: Datagrid, Drag & Drop, Stepper, Tree, Typeahead—Built for Angular 21

ngbootstrap

If you’ve ever built an enterprise dashboard, admin portal, or internal tool, you already know the pain: you end up rewriting the same “boring but critical” UI pieces again and again—tables, pagination, steppers, split panes, trees, typeahead inputs… and then you spend even more time polishing accessibility and edge cases.

That’s exactly why I’m launching ngbootstrap — an open-source Angular UI component library designed to feel native to Angular, while staying Bootstrap-friendly and production-ready.

At its core, @angular-bootstrap/ngbootstrap provides a focused set of components you can drop into real apps (not just demos): Datagrid, Drag & Drop, Pagination, Stepper, Splitter, Tree, Typeahead, and Chips. GitHub

What is ngbootstrap?

ngbootstrap is a modular Angular UI library built for modern Angular projects with Bootstrap-friendly styling. Components are standalone, so you import only what you need. GitHub+1

It’s currently designed for Angular 21 (peer dependency range >=21 <22) and expects your app to include Bootstrap CSS + Bootstrap Icons globally. GitHub

Project goals

Here’s what I’m optimizing for with ngbootstrap:

  • Enterprise-first components (the ones we actually ship in dashboards and portals)
  • Standalone, tree-shakeable imports so you don’t drag in a giant module GitHub
  • Accessibility + keyboard support as a baseline (not an afterthought) GitHub+1
  • Bootstrap styling by default, with the ability to layer Material/Tailwind through theming hooks GitHub+1
  • Practical APIs: sorting/filtering/pagination/editing/export where it matters GitHub+1

Components and highlights

1) Datagrid

A sortable, filterable, paginated, editable table built for real CRUD screens—plus PDF/Excel export support. GitHub+1
Key capabilities include sorting, column/global filtering, pagination, inline add/edit/delete, and export options. GitHub

2) Drag & Drop

Lightweight list/item directives, with keyboard-friendly a11y helpers. GitHub+1

3) Pagination

A clean, standalone Bootstrap-styled pagination component that plays nicely with server-side paging. GitHub+1

4) Stepper

Horizontal/vertical stepper with controlled navigation, error states, and theming hooks (Bootstrap/Material/Tailwind). GitHub

5) Splitter

Resizable horizontal/vertical panes with collapsing, keyboard resizing, and ARIA semantics. GitHub+1

6) Tree

Keyboard-accessible tree with optional checkboxes and expand/collapse helpers. GitHub+1

7) Typeahead

A Bootstrap dropdown overlay with debouncing, virtualization, single/multi select, chips/tags mode, custom templates, and Reactive Forms support. GitHub+1

8) Chips

A small reusable chips/tags component (used by Typeahead, but also standalone). GitHub+1

Quick start

Install:

npm install @angular-bootstrap/ngbootstrap

Add global styles (Bootstrap + Icons):

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

All components are standalone, so you import them directly (example: Datagrid). GitHub+1

If you want Datagrid export (PDF/Excel), install the optional peer dependencies only when needed: GitHub

npm install jspdf jspdf-autotable xlsx

Why I’m sharing this on LiferayUI

Liferay teams often build rich admin and content experiences—and many of those experiences live in front-end apps that still need “enterprise staples” like grids, steppers, trees, and typeaheads.

If you’re building Angular-based UI (standalone apps, embedded widgets, micro-frontends, headless portal experiences), ngbootstrap aims to give you a consistent Bootstrap-friendly component foundation—so your team can focus on business features instead of rebuilding UI infrastructure.

Development & releases

The repo includes a simple local workflow (npm install, npm run lint, npm test, npm run build) and uses Jest + jest-preset-angular for tests. GitHub

Releases are automated via GitHub Actions, and publishing to npm happens from main using an NPM_TOKEN secret. GitHub

Links

Website: https://ngbootstrap.com
GitHub:  https://github.com/angular-bootstrap/ngbootstrap/
NPM:     https://www.npmjs.com/package/@angular-bootstrap/ngbootstrap
Tags: