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:

• [ ] Accordion
• [x] Alert => #1800
• [ ] Carousel
• [ ] Collapse
• [ ] Popover
• [ ] Modal
• [x] Tabset => #1802
• [ ] Tooltip

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!

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+:

• [x] Accordion
• [x] Alert
• [x] Buttons
• [x] Carousel (fix in #2494)
• [x] Collapse
• [x] Datepicker*
• [x] Dropdown
• [x] Modal*
• [x] Pagination
• [x] Popover*
• [x] Progressbar
• [x] Rating
• [x] Tabs
• [x] Timepicker
• [x] Tooltip*
• [x] Typeahead*

Latest releases:

• ng-bootstrap 10 with Angular 12 and BS 4.5 (Stable)
• ng-bootstrap 11 with Angular 13 and BS 4.6 → 11.0.0
• ng-bootstrap 12 with Angular 13 and BS 5 → 12.0.0

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

• [x] accordion animation is broken, looks like height is not calculated correctly(?) (#4097)
• [x] demo site has the horizonal scrollbar (#4224)
• [x] datepicker header lost its color (#4096)
• [x] datepicker demo → range selection in a popup → unwanted input is visible (#4230)
• [x] demo site → all since/deprecated badges are not visible at all (#4223)
• [x] nav demo → basic usage → first/second padding to fix (#4228)
• [x] nav demo → dynamic tabs → crosses look strange (#4229)
• [x] table demo → full text search (#4231)
• [x] toast demo → management service is broken (toasts reappearing when navigating between pages)

v5.0.0-beta2:

• [ ] Popover : data-bs-popper="static" / "none" usage

v5.0.0-beta1:

• [x] Components : Positioning classes (#3963)
• [x] Utilities : Utility classes (#3978)
• [x] Utilities : Utilities(#3978)
• [x] Mixins : Nothing to do
• [x] Variables : Nothing to do
• [x] Sass : Nothing to do
• [x] New Utilities : Nothing to do
• [ ] Javascript : See popper 2 section (to be created)
• [x] Breadcrumb : Nothing to do
• [x] Toast : Possible use of the container created

v5.0.0-alpha3

• [x] Browser support : drop Edge legacy. Nothing to do? (maybe update browserslist?)
• Sass, reboot, buttons: nothing to be done

v5.0.0-alpha2:

• [x] Close Button : Alert(#3976), Toast(#3986)
• [x] Utilities : We could use fs- for our portal, PR in progress for the migration, (#3979)
• [ ] Sass,Docs, Layout, Reboot, Color, Forms, Badges, Buttons, Carousel & Pagination (will be fix with sr-only migration see below), Collapse, Dropdown: nothing to be done
• [x] Tooltip/Popover: We actually have no whiteList feature so no API naming migration to be done.
• [x] Toast : (#4032)
  • [x] Change the default timeout
  • [x] Remove the ngb-toasts container in favor of the new Bootstrap one
• [x] Helpers : Helpers(#3982).
• [ ] For Utilities : nothing to be done (but we could use some utilities to clean our portal)

v5.0.0-alpha1

• [ ] Update browser support list
• [x] Sass : Nothing to be done.
• [x] Javascript: Nothing to be done.
• [x] Color system : Nothing to be done.
• [ ] Grid and Layout : Nothing for the library, media is not used. But the layout of the portal can be impacted --> to be verified.
• [ ] Content Reboot : ol ul padding --> verify if changes is needed for the portal. It seems that text-* utils are not using on link so no migration needed to new utils link-*
• [ ] Typography : Links are hover by default (unless in component) (in btn-link underline is set by default --> migration needed for the portal if we want to keep old look).
• [ ] Accordion: is currently using btn-link --> are we happy with the new look? --> Here I think during refactory of the accordion to the new specific class we may no longer have the issue
• [ ] Buttons : We need to migrate to btn-check. Actually the directive may no longer be needed so it raised the question of keeping ex and link to BS docs / keeping an ex with angular forms...
• [ ] Carousel : There is a dark variant, but it's not possible to have a custom class on the carousel container

Notable changes

• [x] Add support for our existing Accordion and deprecate it
• [x] Removed JS Buttons plugin for a CSS-only solution → #4270
• [x] Popper 2 → #3579
• [x] RTL → to investigate
• [ ] New accordion component (#3898)
• [x] New offcanvas component
• [x] Dropping IE and legacy Edge support completely → https://v5.getbootstrap.com/docs/5.0/migration/#browser-support-1
• [x] Bootstrap Icons → to investigate
• [x] New look and feel for the website

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

That is - modals that can be opened from modals. The current thinking is:

• we are very reluctant to support those as it is very, very bad UX
• "real life" sometimes "requires" those anyway....

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.

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:

• pass $event and call preventDefault() on it; this is what we do in the accordion, for example: https://github.com/ng-bootstrap/core/blob/1d912de06578aca1eaea9ad69942978090da43ff/src/accordion/accordion.ts#L42
• remove href altogether and add cursor styling through CSS (this would be quite easy with ng2 since we've got styles encapsulation)
• try to convince bootstrap folks to "fix it" <- not even sure it makes sense

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?

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

Two questions as I cannot find details anywhere:

1. how can I enforce NgbDate to follow dateformat like 'dd/MM/yyyy'.
2. I set initial model to empty string or '2016-12-10', both ended up in this initial date:

How I can set the initial date based on a certain set format, e.g in my case its en-gb culture?

Thanks

Latest releases:

• ng-bootstrap 10 with Angular 12 and BS 4.5 (Stable)
• ng-bootstrap 11 with Angular 13 and BS 4.6 → RC.0
• ng-bootstrap 12 with Angular 13 and BS 5 → Beta.4

Internal issues:

• [x] Looks like StackBlitz doesn't work with Angular 13 yet → https://github.com/stackblitz/core/issues/1657, so no demo site update
• [x] eslint-plugin-deprecation doesn't support eslint 8→ using angular-eslint 12 version at the moment
• [x] e2e coverage is not working. Looks like issues with coverage-istanbul-reporter → temporarily disabling custom webpack config
• [x] BS warnings in e2e tests in console → temporarily disabling warning checks
• [x] ~~unit tests for schematics are broken due to externalSchematic calling @angular/localize ESM issues → temporarily disabling~~ (Fixed in Angular 13.0.2 with #4183)
• [x] ~~no support for Angular 13 in ngx-build-plus → no e2e coverage at the moment~~ → moved to @angular-builders with #4180

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 [email protected]\ng-bootstrap\ng-bootstrap.d.ts.ɵh.html(3,67): : An expression of type 'void' cannot be tested for truthiness [email protected]\ng-bootstrap\ng-bootstrap.d.ts.ɵh.html(25,67): : An expression of type 'void' cannot be tested for truthiness

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.

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:

ng add @ng-bootstrap/ng-bootstrap

...

The package @ng-bootstrap/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
Cannot find module '@angular-devkit/schematics'
Require stack:
- /home/jano/Projekte/<project>/node_modules/@ng-bootstrap/ng-bootstrap/schematics/ng-add/index.js
- /home/jano/.npm-global/lib/node_modules/@angular/cli/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /home/jano/.npm-global/lib/node_modules/@angular/cli/node_modules/@angular-devkit/schematics/tools/index.js
- /home/jano/.npm-global/lib/node_modules/@angular/cli/src/commands/add/cli.js
- /home/jano/.npm-global/lib/node_modules/@angular/cli/src/command-builder/command-runner.js
- /home/jano/.npm-global/lib/node_modules/@angular/cli/lib/cli/index.js
- /home/jano/.npm-global/lib/node_modules/@angular/cli/lib/init.js

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 15.0

ng-bootstrap: 14.0

Bootstrap: idk

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:

• add an additional button that is display none - this has a double border in the middle (very faint)
• add both btn-group and input-group to the original element - this has 2 different bugs - the end border radius disappears on hover. Also the 2 elements wrap when the width of the page is reduced (fixed with flex-nowrap).

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

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 the ngb14 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

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 the NgbModalWindow. Unfortunately, the NgbModalWindow 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:

1. Expose the NgbModalWindow class, such that the NgbModalWindow can be injected into a child component (this is the technical approach we sort of achieve with the hack above)
2. Add a public getter or field modalWindow on the NgbModalRef which provides _windowCmptRef.instance. This could return a custom-tailored interface type that only exposes what is reasonable to add to the public API

Or 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.