@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.
Welcome to the Angular 2 version of the Angular UI Bootstrap library. This library is being built from scratch by the ui-bootstrap team. We are using TypeScript and targeting the Bootstrap 4 CSS framework.
As with Bootstrap 4 and Angular 2, this library is a work in progress. Please check out our list of issues to see all the things we are implementing. Feel free to make comments there.
Check all the directives in action at https://ng-bootstrap.github.io
After installing the above dependencies, install ng-bootstrap via:
npm install --save @ng-bootstrap/ng-bootstrap
Once installed you need to import our main module:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
The only remaining part is to list the imported module in your application module. You should end up with the code similar to:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ng-bootstrap:
map: {
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
}
We support the same browsers and versions supported by both Bootstrap 4 and Angular 2, whichever is more restrictive. See this for up-to-date Angular 2 browser support.
We are always looking for the quality contributions! Please check the CONTRIBUTING.md doc for contribution guidelines.
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.
Oh, we are ashamed and want to fix it ASAP! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:
A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
Please take a moment and read our Code of Conduct
1.0.0-alpha.7 (2016-10-10)
This release restores full AoT compatibility and has proper support for lazy-loaded NgbModule. On top of this we are
shipping a lot of new features and bug fixes - details below.
NgbModule module must now import using the forRoot() static method. Check the updated installation instructions for more details.Before:
0=Jan; 1=Feb; ... 11=Dec
0=Sun; 1=Mon; ... 6=Sat
After:
1=Jan; 2=Feb; ... 12=Dec
1=Mon; 2=Tue; ... 7=Sun
<a name="1.0.0-alpha.6"></a>
FAQs
Angular powered Bootstrap
The npm package @ng-bootstrap/ng-bootstrap receives a total of 777,791 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
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.