@ng-bootstrap/ng-bootstrap
Advanced tools
@ng-bootstrap/ng-bootstrap provides Angular widgets built from the ground up using Bootstrap 4 CSS. It allows developers to use Bootstrap components natively in Angular applications without the need for jQuery.
Accordion
The Accordion component allows you to create collapsible panels. The example demonstrates a simple accordion with two panels, one titled 'Simple' and the other 'Advanced'.
<ngb-accordion [closeOthers]="true">
<ngb-panel title="Simple">
<ng-template ngbPanelContent>
This is a simple accordion panel.
</ng-template>
</ngb-panel>
<ngb-panel>
<ng-template ngbPanelTitle>
<span>Advanced</span>
</ng-template>
<ng-template ngbPanelContent>
This is an advanced accordion panel.
</ng-template>
</ngb-panel>
</ngb-accordion>Modal
The Modal component allows you to create and control modal dialogs. The example demonstrates a button that opens a modal with a title, body, and footer.
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-modal',
template: `<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, world!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
</div>
</ng-template>`
})
export class ModalComponent {
constructor(private modalService: NgbModal) {}
open(content) {
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
console.log(`Closed with: ${result}`);
}, (reason) => {
console.log(`Dismissed ${reason}`);
});
}
}Tooltip
The Tooltip component allows you to add tooltips to elements. The example demonstrates a button with a tooltip that appears on top when hovered.
<button type="button" class="btn btn-outline-secondary" ngbTooltip="Tooltip on top" placement="top">Tooltip on top</button>Datepicker
The Datepicker component allows you to add a date selection widget. The example demonstrates a simple datepicker bound to a model.
<ngb-datepicker [(ngModel)]="model"></ngb-datepicker>ngx-bootstrap provides Bootstrap components powered by Angular. It offers a similar set of features to @ng-bootstrap/ng-bootstrap but includes support for both Bootstrap 3 and 4, and it is known for its extensive documentation and community support.
PrimeNG is a collection of rich UI components for Angular. It offers a broader range of components compared to @ng-bootstrap/ng-bootstrap, including advanced data tables, charts, and more. It is highly customizable and supports various themes.
Angular Material provides modern UI components based on Google's Material Design. While it does not use Bootstrap, it offers a comprehensive set of components and is known for its consistency and integration with Angular's ecosystem.
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.
Please check all components we have in action at https://ng-bootstrap.github.io
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 |
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.
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.
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:
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.
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:
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.
Please check DEVELOPER.md for documentation on running the project locally and CONTRIBUTING.md for contribution guidelines.
Please take a moment and read our Code of Conduct
17.0.1 (2024-08-28)
Hopefully fixes that one datepicker bug with weekday labels.
Also replacing NgZone.onStable() with afterRender()/afterNextRender() internally and using esbuild with zoneless CD for the demo site.
This release bumps minimum required versions to Angular 18.0.0.
We do not officially support provideExperimentalZonelessChangeDetection() yet, it will come in a future minor release. Please remember this an experimental API, follow #4709 and open new issues if you find any problems.
Signal support will come later, most likely in the next major release.
FAQs
Angular powered Bootstrap
The npm package @ng-bootstrap/ng-bootstrap receives a total of 423,526 weekly downloads. As such, @ng-bootstrap/ng-bootstrap popularity was classified as popular.
We found that @ng-bootstrap/ng-bootstrap demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.