Data-heavy by design
Built for operational screens and dense workflows, with accessible grid patterns, practical defaults, and performance-conscious Angular examples.
This project is not affiliated with ng-bootstrap or ngx-bootstrap. Those projects focus mainly on Bootstrap components for Angular. ngbootstrap focuses on practical Angular UI components and learning-friendly examples for data-heavy application work.
Open Source · Angular UI for data-heavy apps · Free for everyone
Angular UIfor data-heavy apps
Build with confidence using practical Angular UI components focused on Data Grid, Angular-native Form Builder, drag and drop workflows, and performance-focused documentation examples.
- 3,197npm downloads
- v2.2.0latest
- AI-managed
Why ngbootstrap?
Practical Angular UI for real product workflows.
Components you can ship today, built with accessibility, performance, documentation quality, and developer experience in mind.
Angular-native form builder
Form builder and drag-and-drop primitives cover simple list reordering, list-to-list moves, and nested builder-style workflows with Angular-first APIs.
Modern Angular standards
Standalone components, strict templates, signals-friendly patterns, and Angular 22-aligned guidance for maintainable library and docs work.
How this project is different
A different focus from existing Angular Bootstrap libraries.
ngbootstrap is not trying to replace ng-bootstrap or ngx-bootstrap. The focus here is Data Grid, Angular-native Form Builder, drag and drop workflows, docs experience, and practical performance-focused Angular examples.
ng-bootstrap and ngx-bootstrap are excellent Angular Bootstrap projects with a different primary focus.
ngbootstrap is focused on Data Grid, Angular-native Form Builder, drag and drop workflows, docs experience, and practical performance-focused Angular examples.
The goal is not to replace existing Angular Bootstrap libraries, but to provide additional Angular UI components and learning-friendly examples.
AI-powered development
Developed & managed by AI agents.
ngbootstrap is an AI-native open-source experiment: components, tests, docs, and release work are coordinated with agent-supported development workflows.
The community reviews, shapes direction, and opens issues while agents help implement, verify, and ship updates.
agent:planneranalyzing issue #4821...
agent:codergenerating NgbDatagrid patch
agent:tests:runner312/312 passed (4.2s)
agent:reviewapplying a11y lint fixes
agent:ci:pipelinebuild passing · 0 errors
agent:releasepublishing v2.2.0 to npm
agent:npm:publish@angular-bootstrap/ngbootstrap@2.2.0
NGB Datagrid
A datagrid built for performance.
The ngbootstrap Datagrid is benchmarked with frozen local snapshots so the docs can show real baseline numbers without rerunning measurements on every visit.
View datagrid docsColumn sorting
Enable sortable columns with clear state updates and accessible header controls.
Built-in filtering
Per-column and global filtering with custom predicates and reusable filter descriptors.
Pinned columns
Keep key columns visible while users scan wide operational datasets.
Column resizing
Drag-to-resize columns with width constraints and persisted overrides.
Responsive layouts
Switch between tabular and stacked layouts for mobile and dense dashboard views.
Form Builder flows
Use the same drag-and-drop foundation for simple list interactions and Angular-native form builder experiences.
TypeScript-strict
Typed inputs, events, templates, and helper APIs keep docs and IDE feedback aligned.
Angular-native Form Builder
Simple drag and drop to advanced builder workflows.
Market it as a form builder, use it as drag and drop too: the same foundation supports sortable lists, list-to-list movement, nested panels, and builder-style Angular experiences.
View form builder docsOpen source
Contribute to ngbootstrap.
ngbootstrap is my way of giving back — open-sourcing the complex UI components I have learned to build so developers do not have to rent their UI from third-party vendors. Powered entirely by the community.
Project goals
- Accessibility by default — keyboard support, ARIA semantics, clear messaging.
- Real-world features without subscriptions or proprietary lock-in.
- Great DX: simple APIs, template overrides, strict typing, and thorough docs.
- Performance and responsiveness for data-heavy dashboards.
- Clear positioning that avoids confusion with existing Angular Bootstrap libraries.
- Transparent priorities and community-driven maintenance.
How you can help
- Try components in real apps and open issues with feedback or ideas.
- Improve docs, examples, and accessibility test coverage.
- Contribute new features, polish UI/UX, or help review pull requests.
- Join discussions to shape priorities and keep the project sustainable.
Common questions
Know where ngbootstrap fits.
Is ngbootstrap the same as ng-bootstrap or ngx-bootstrap?
No. ngbootstrap is not affiliated with ng-bootstrap or ngx-bootstrap. Those established projects focus mainly on Bootstrap components for Angular, while ngbootstrap focuses on practical Angular UI for data-heavy apps, including Data Grid, Angular-native Form Builder, drag and drop workflows, and performance-focused examples.
Is ngbootstrap free?
Yes. ngbootstrap is free and open source under the MIT license, with no subscription or proprietary vendor lock-in.
What are the requirements to use ngbootstrap?
ngbootstrap supports Angular 21 and 22, requires RxJS 7.8, and expects Bootstrap CSS in the consuming application. Bootstrap Icons are optional for icon-based components and examples.
How do I install ngbootstrap?
Run npm install @angular-bootstrap/ngbootstrap bootstrap bootstrap-icons, then import the standalone components you need directly into your Angular components.
Get started
Build faster with ngbootstrap.
Check the docs, copy and paste examples, and start shipping today.