NG Bootstrap - Angular powered Bootstrap widgets
Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem. No dependencies on 3rd party JavaScript.
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
- Dependencies
- Installation
- Supported browsers
- Getting help
- You think you've found a bug?
- Contributing to the project
- Code of conduct
Demo
Please check all components we have in action at https://ng-bootstrap.github.io
Dependencies
The only two dependencies are Angular and Bootstrap 4 CSS. The supported versions are:
ng-bootstrap | Angular | Bootstrap CSS |
---|---|---|
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.0.0 | 11.0.0 | 4.5.0 |
10.0.0 | 12.0.0 | 4.5.0 |
11.0.0 | 13.0.0 | 4.6.0 |
12.0.0-beta.x | 13.0.0 | 5.0.0 |
Installation
We strongly recommend using Angular CLI for setting up a new project. If you have an Angular ≥ 9 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
- SO 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.
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 reproduce 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 essentials 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 the 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
animations: initial push for animations
Some of the BS components need animations beyond simple CSS3 transitions (those are taken care of by BS classes). Components that need non-trivial animations are:
Dropdown append to body
Bug description:
Support for dropdown append-to-body.
Use case
In a list inside an overflowed element, the dropdown is shown "inside" the main element, and you cannot seen it completely.
Working with ng1 version:
Thanks!
Server side rendering with universal
We should explore server-side rendering options with universal. IMO we should be in a pretty good shape to support it as we are not doing anything too crazy. There is direct DOM access in few places but it shouldn't be too hard to remove it.
Anyway, after we release a version with full AoT support (already in master) we should check what it means to support universal. Probably a good starting point would be to use the https://github.com/angular/universal-starter
Widgets confirmed to work with Angular 6+:
Bootstrap 5 support
Latest releases:
This is an umbrella issue for adding Bootstrap 5 support to ng-bootstrap:
List of PRs related to the Bootstrap migration page sections
v5.0.0
since
/deprecated
badges are not visible at all (#4223)v5.0.0-beta2:
v5.0.0-beta1:
v5.0.0-alpha3
v5.0.0-alpha2:
v5.0.0-alpha1
Notable changes
Add support to angular 14
Bug description:
We are tracking dependencies upgrade to angular 14 at https://github.com/jhipster/generator-jhipster/issues/18817.
Versions of Angular, ng-bootstrap and Bootstrap:
Angular: 14
ng-bootstrap: any
Modal: consider supporting stacked modals
That is - modals that can be opened from modals. The current thinking is:
Will try to resist us long as possible before implementing stacked modals, but let's have this issue to track interest / real-life usage scenarios.
Dealing with styling of "a" tags (with or without hrefs?)
A very common markup in Angular version of bootstrap directives goes like this:
<a (click)="prev()">Previous</a>
Pure bootstrap version would have an "empty" href (
<a (click)="prev()" href="#">Previous</a>
) to provide appropriate styling (cursor) but this is not needed in ng-version and can interfere with routing.The question: how do we deal with this situation? Few ideas:
$event
and callpreventDefault()
on it; this is what we do in the accordion, for example: https://github.com/ng-bootstrap/core/blob/1d912de06578aca1eaea9ad69942978090da43ff/src/accordion/accordion.ts#L42href
altogether and add cursor styling through CSS (this would be quite easy with ng2 since we've got styles encapsulation)Now, I must admit that I don't know what is the impact of removing
href
on accessibility and keyboard navigation, so the encapsulated CSS path might be a non-option in the end...Thoughts?
Datepicker Popup - Close when outside is clicked/touched
Bug description:
Datepicker popup does not close when an area outside of the popup/textbox is clicked/touched. Perhaps an optional true/false setting could be introduced to allow for this functionality.
Link to minimally-working plunker that reproduces the issue:
Datepicker popup on examples page
Version of Angular, ng-bootstrap, and Bootstrap:
Angular: 2.0.0 final
ng-bootstrap: 1.0.0-alpha.5
Bootstrap: 4.0.0-alpha.4
NgbDate culture format and initial model?
Two questions as I cannot find details anywhere:
How I can set the initial date based on a certain set format, e.g in my case its en-gb culture?
Thanks
Angular 13 support
Latest releases:
Internal issues:
eslint-plugin-deprecation
doesn't supporteslint 8
→ usingangular-eslint 12
version at the momentcoverage-istanbul-reporter
→ temporarily disabling custom webpack configexternalSchematic
calling@angular/localize
ESM issues → temporarily disabling~~ (Fixed in Angular 13.0.2 with #4183)ngx-build-plus
→ no e2e coverage at the moment~~ → moved to @angular-builders with #4180Typescript 3.1.1 build error
Angular: 7.0.0-rc.0 Typescript: 3.1.1 ng-bootstrap: 3.2.2
New version of typescript causes prod build error:
ERROR in node_modules@ng-bootstrap\ng-bootstrap\ng-bootstrap.d.ts.ɵh.html(3,67): : An expression of type 'void' cannot be tested for truthiness node_modules@ng-bootstrap\ng-bootstrap\ng-bootstrap.d.ts.ɵh.html(25,67): : An expression of type 'void' cannot be tested for truthiness
Bootstrap 5.3 and dark mode for docs
Bootstrap 5.3 alpha 1 was release https://blog.getbootstrap.com/2022/12/24/bootstrap-5-3-0-alpha1/ so it will be nice to have a doc with dark mode to test the components.
Installing ng-bootstrap 14.0 with Angular CLI 15.0.4 leads to "Cannot find module '@angular-devkit/schematics'"
Bug description:
Installing ng-bootstrap 14.0 with Angular CLI 15.0.4 leads to "Cannot find module '@angular-devkit/schematics'" to a project with Angular 15.0.0 dependency leads to the following error:
Versions of Angular, ng-bootstrap and Bootstrap:
Angular: 15.0
ng-bootstrap: 14.0
Bootstrap: idk
Tooltips on disabled buttons in input-groups/btn-groups
Please remember, the issues forum is NOT for support requests. It is for bugs and feature requests only. Please read https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CONTRIBUTING.md and search existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.
Bug description:
Recommended use of ngb-tooltip on a disabled button is to add a div around the button. In Bootstrap 4, this would display correctly for an input-group, using an input-group-append div around the button, and adding input-group-text to the button itself.
In Bootstrap 5, input-group-append has been deprecated, with input-group-text now the only option to have items appended to an input-group. Buttons inside input-group-text divs do not display correctly (see example 1). Adding an additional input-group also does not work. Adding a btn-group works, but because there is only one item (the button), the top-left and bottom-left borders still apply a radius (example 2).
There are two workarounds I've found:
Link to minimally-working StackBlitz that reproduces the issue:
https://stackblitz.com/edit/angular-mpk2kv?file=src/app/tooltip-basic.html
You can fork a StackBlitz from one of our demos and use it as a starting point.
Please note that we can not act on bug reports without a minimal reproduction scenario in a StackBlitz. Here is why: https://github.com/ng-bootstrap/ng-bootstrap#you-think-youve-found-a-bug
Versions of Angular, ng-bootstrap and Bootstrap:
Angular 14, Bootstrap 5.2, ng-bootstrap 14
Angular: 14
ng-bootstrap: 14
Bootstrap: 5.2
Regression: modal components don't have the correct injector
Bug description:
Since version 14, a component used as the modal content doesn't have the correct injector anymore.
If a lazy loaded module defines a provider for a service and a component from that module is used as a modal content and tries to get the service via DI, a
NullInjectorError
is thrown when opening the modal.Link to minimally-working StackBlitz that reproduces the issue:
https://stackblitz.com/github/jnizet/modal-repro/tree/ngb14
This repro is also available on github: https://github.com/jnizet/modal-repro
The
main
branch shows the code working with ng-bootstrap 13, and thengb14
branch shows the same code not working with ng-bootstrap 14.Versions of Angular, ng-bootstrap and Bootstrap:
Angular: 15.0.4
ng-bootstrap: 14.0.0
Bootstrap: 5.2.3
Expose Modal Window to support Dynamic Modal Resizing
We have a modal with a dynamic form. Based on a switch control, a large part of the form is displayed / hidden side-by-side with the existing form inside the same modal. Due to this, we would like to increase / decrease the modal size dynamically after it has been opened.
This could be easily achieved by setting the
size
/fullscreen
properties on theNgbModalWindow
. Unfortunately, theNgbModalWindow
is not exposed, so we used a little hack to access it:(ngbModalRef as any)._windowCmptRef.instance;
We see a few ways to add support for this:
NgbModalWindow
class, such that theNgbModalWindow
can be injected into a child component (this is the technical approach we sort of achieve with the hack above)modalWindow
on theNgbModalRef
which provides_windowCmptRef.instance
. This could return a custom-tailored interface type that only exposes what is reasonable to add to the public APIOr is there another way how we can achieve that? Maybe we can help/provide a PR if we see a reasonable chance this would get integrated. But as it widens the public API I we would like to discuss first.