@ng-bootstrap/ng-bootstrap vs ngx-bootstrap
Angular UI Component Libraries Comparison
1 Year
@ng-bootstrap/ng-bootstrapngx-bootstrapSimilar Packages:
What's Angular UI Component Libraries?

Angular UI Component Libraries are collections of pre-built, reusable user interface components designed specifically for Angular applications. These libraries provide a wide range of UI elements, such as buttons, modals, forms, and navigation components, that are styled and functionally ready to use. By leveraging these libraries, developers can significantly speed up the UI development process, ensure consistency in design, and enhance the overall user experience of their applications. Two popular Angular UI component libraries are @ng-bootstrap/ng-bootstrap and ngx-bootstrap, both of which offer a rich set of components but differ in their design philosophies and implementation.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
@ng-bootstrap/ng-bootstrap569,0338,2331.62 MB4052 months agoMIT
ngx-bootstrap317,1575,5282.89 MB5752 months agoMIT
Feature Comparison: @ng-bootstrap/ng-bootstrap vs ngx-bootstrap

Integration with Bootstrap

  • @ng-bootstrap/ng-bootstrap:

    @ng-bootstrap/ng-bootstrap integrates seamlessly with Bootstrap, providing Angular-native implementations of Bootstrap components without the need for jQuery. This ensures that the components are lightweight, efficient, and fully compatible with Angular's change detection and rendering mechanisms.

  • ngx-bootstrap:

    ngx-bootstrap is built on top of Bootstrap and provides Angular wrappers for Bootstrap components. It allows developers to use Bootstrap's CSS and JavaScript features while providing Angular-friendly APIs and directives, making it easy to integrate into existing Bootstrap-based projects.

Component Customization

  • @ng-bootstrap/ng-bootstrap:

    @ng-bootstrap/ng-bootstrap allows for extensive customization of its components through Angular's input properties, output events, and content projection. Developers can easily style components using CSS or Angular's ViewEncapsulation, and the library provides APIs for creating custom templates and directives.

  • ngx-bootstrap:

    ngx-bootstrap also supports component customization, particularly for its form controls and modal components. It provides several input properties and output events for each component, allowing developers to customize their behavior and appearance. Additionally, ngx-bootstrap encourages the use of Bootstrap's utility classes for styling.

Accessibility

  • @ng-bootstrap/ng-bootstrap:

    @ng-bootstrap/ng-bootstrap places a strong emphasis on accessibility (a11y) and follows the WAI-ARIA guidelines to ensure that all components are usable by people with disabilities. The library provides keyboard navigation, screen reader support, and customizable attributes to enhance the accessibility of its components.

  • ngx-bootstrap:

    ngx-bootstrap also focuses on accessibility and aims to make its components compliant with WAI-ARIA standards. The library provides keyboard navigation and supports screen readers, but the level of accessibility may vary across different components, depending on how they are implemented.

Documentation and Community Support

  • @ng-bootstrap/ng-bootstrap:

    @ng-bootstrap/ng-bootstrap has comprehensive documentation that includes detailed API references, usage examples, and guides for each component. The library is actively maintained, and the community is growing, providing support through GitHub issues and discussions.

  • ngx-bootstrap:

    ngx-bootstrap boasts extensive documentation, including examples, API references, and customization guides. The library has a large and active community, which contributes to its development and provides support through forums, GitHub, and social media.

Ease of Use: Code Examples

  • @ng-bootstrap/ng-bootstrap:

    @ng-bootstrap/ng-bootstrap is designed to be easy to use for Angular developers, with a focus on simplicity and clarity in its API design. The library provides clear documentation and examples, making it straightforward for developers to integrate and use its components in their applications.

  • ngx-bootstrap:

    ngx-bootstrap is also user-friendly, especially for developers familiar with Bootstrap. The library's API is intuitive, and its documentation includes plenty of examples to help developers quickly understand how to use its components.

How to Choose: @ng-bootstrap/ng-bootstrap vs ngx-bootstrap
  • @ng-bootstrap/ng-bootstrap:

    Choose @ng-bootstrap/ng-bootstrap if you prefer a library that is built entirely with Angular and does not rely on jQuery. It offers a wide range of components that are designed to be fully customizable and accessible, making it a great choice for modern Angular applications.

  • ngx-bootstrap:

    Choose ngx-bootstrap if you need a library that provides a comprehensive set of Bootstrap components with additional features. It is ideal for projects that already use Bootstrap and want to leverage its styling and functionality while benefiting from Angular-specific implementations.

README for @ng-bootstrap/ng-bootstrap

NG Bootstrap - Angular-powered Bootstrap widgets

npm version Build Status codecov devDependency Status Sauce Test Status

Angular widgets built from the ground up using only Bootstrap 5 CSS with APIs designed for the Angular ecosystem.

Please check our demo site and the list of issues to see all the things we are working on. Feel free to make comments there.

Table of Contents

Demo

Please check all components we have in action at https://ng-bootstrap.github.io

Dependencies

The only dependencies are Angular, Bootstrap 5 CSS, and Popper.

Angular and Popper are explicitly listed as peer dependencies, while Bootstrap is not, as they don't release their CSS separately. The table below simply lists the exact version of Bootstrap CSS against which the corresponding versions of ng-bootstrap are tested.

| ng-bootstrap | Angular | Bootstrap CSS | Popper | | ------------ | ------- | ------------- | ------- | | 1.x.x | ^5.0.2 | 4.0.0 | | | 2.x.x | ^6.0.0 | 4.0.0 | | | 3.x.x | ^6.1.0 | 4.0.0 | | | 4.x.x | ^7.0.0 | 4.0.0 | | | 5.x.x | ^8.0.0 | 4.3.1 | | | 6.x.x | ^9.0.0 | 4.4.1 | | | 7.x.x, 8.x.x | ^10.0.0 | 4.5.0 | | | 9.x.x | ^11.0.0 | 4.5.0 | | | 10.x.x | ^12.0.0 | 4.5.0 | | | 11.x.x | ^13.0.0 | 4.6.0 | | | 12.x.x | ^13.0.0 | 5.0.0 | ^2.10.2 | | 13.x.x | ^14.1.0 | 5.2.0 | ^2.10.2 | | 14.x.x | ^15.0.0 | 5.2.3 | ^2.11.6 | | 15.x.x | ^16.0.0 | 5.2.3 | ^2.11.6 | | 16.x.x | ^17.0.0 | 5.3.2 | ^2.11.8 | | 17.x.x | ^18.0.0 | 5.3.2 | ^2.11.8 | | 18.x.x | ^19.0.0 | 5.3.3 | ^2.11.8 |

Installation

We strongly recommend using Angular CLI for setting up a new project. If you have an Angular CLI project, you could simply use our schematics to add ng-bootstrap library to it.

Just run the following:

ng add @ng-bootstrap/ng-bootstrap

It will install ng-bootstrap for the default application specified in your angular.json. If you have multiple projects and you want to target a specific application, you could specify the --project option:

ng add @ng-bootstrap/ng-bootstrap --project myProject

If you prefer not to use schematics and install everything manually, please refer to the manual installation instructions on our website.

Supported browsers

We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive. See Angular browser support and Bootstrap browser support for more details.

Our code is automatically tested on all supported browsers.

Getting help

Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on StackOverflow where maintainers are looking at questions tagged with ng-bootstrap.

StackOverflow is a much better place to ask questions since:

  • there are hundreds of people willing to help on StackOverflow
  • questions and answers stay available for public viewing so your question/answer might help someone else
  • Stack Overflow's voting system assures that the best answers are prominently visible.

To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.

Do you think you've found a bug?

We want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it.

We ask you to respect two things:

  • fill the GitHub issue template by providing the bug description and appropriate versions of Angular, ng-bootstrap and TypeScript
  • provide a use-case that fails with a minimal reproduction scenario using StackBlitz (you can start by forking one from our demo page)

A minimal reproduction scenario allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem.

Please note that we will be insisting on a minimal reproduction scenario in order to save maintainers time and ultimately be able to fix more bugs. We'll mark the issue as non-actionable without it and close if not heard from the reporter.

Interestingly, from our experience users often find coding problems themselves while preparing a minimal StackBlitz. We understand that sometimes it might be hard to extract essential bits of code from a larger code-base but we really need to isolate the problem before we can fix it.

Contributing to the project

Please check DEVELOPER.md for documentation on running the project locally and CONTRIBUTING.md for contribution guidelines.

Code of conduct

Please take a moment and read our Code of Conduct