This release bumps minimum required versions to Angular 21.0.0

Features

This release includes component entry points. This allows applications importing ng-bootstrap to speed up their build and have a slightly smaller bundle.

For example, you can use the ng-bootstrap pagination component like this:

import { NgbPagination } from '@ng-bootstrap/ng-bootstrap/pagination';

@Component({
  template: `<ngb-pagination [collectionSize]="50" />`,
  imports: [NgbPagination]
})
export class MyComponent {}

Please note that this is not a breaking change, you will still be able to import everything from the main entrypoint.

Regarding Zoneless support

ng-bootstrap demo has been using Zoneless Change Detection since version 17.0.1
If you have any issue using ng-bootstrap in a zoneless app, please open a bug and we will patch ng-bootstrap 20

Miscellaneous

• Updated all links of the demo website from angular.io to their corresponding one on angular.dev
• Updated all demo codes to use the standalone components instead of modules
• Moved unit tests to vitest
• Stackblitzes now run on zoneless
• Fixed stackblitz links for popover / tooltip custom target examples

This release candidate version bumps minimum required versions to Angular 21.0.0

Features

This release includes component entry points. This allows applications importing ng-bootstrap to speed up their build and have a slightly smaller bundle.

For example, you can use the ng-bootstrap pagination component like this:

import { NgbPagination } from '@ng-bootstrap/ng-bootstrap/pagination';

@Component({
  template: `<ngb-pagination [collectionSize]="50" />`,
  imports: [NgbPagination]
}
export class MyComponent {}

Please note that this is not a breaking change, you will still be able to import everything from the main entrypoint.

19.0.1 (2025-07-01)

Bug Fixes

• toast: missing export of NgbToastOptions interface (6b26ef3)
• positioning: missing export of PlacementArray type (#4847) (a4e94a3)
• datepicker: missing export of DayTemplateContext interface (1b90da5)

19.0.0 (2025-06-19)

This release bumps minimum required versions to Angular 20.0.0

Bug Fixes

• carousel: remove invalid aria-activedescendant (6ecb129)
• datepicker: add missing attributes aria-disabled and aria-selected (fab39cb)
• modal: fix usage of modal in zoneless, by calling mark for check after update of modal options (afe98ee)
• pagination: put aria-current on link element instead of li for a11y (39dc037)
• timepicker: wrong auto-setting of hour value (4137c60)
• tooltip: opening just after a close does not keep the tooltip open (bfee86d)
• tooltip: tooltip created after view destroyed (d9c96aa)
• typeahead: add aria-controls for accessibility (#4816)
• typeahead: set the value of typeahead's control to null instead of undefined when using the non-editable mode (daaa56d)

Features

• tooltip,popover: allow to keep tooltip/popover open when hovered if closeDelay is a positive number (8117bfa)

This release candidate version bumps minimum required versions to Angular 20.0.0

Bug Fixes

• carousel: remove invalid aria-activedescendant (6ecb129)
• datepicker: add missing attributes aria-disabled and aria-selected (fab39cb)
• modal: fix usage of modal in zoneless, by calling mark for check after update of modal options (afe98ee)
• pagination: put aria-current on link element instead of li for a11y (39dc037)
• timepicker: wrong auto-setting of hour value (4137c60)
• tooltip: opening just after a close does not keep the tooltip open (bfee86d)
• typeahead: add aria-controls for accessibility (#4816)
• typeahead: set the value of typeahead's control to null instead of undefined when using the non-editable mode (daaa56d)

Features

• tooltip,popover: allow to keep tooltip/popover open when hovered if closeDelay is a positive number (8117bfa)

This release bumps minimum required versions to Angular 19.0.0.

We have reviewed all components to make sure they are hydratable.
Please note that currently components using i18n require the use of experimental withI18nSupport().
You can learn more about the advantages of hydration in the Angular doc.

Bug Fixes

• accordion: respect destroyOnHide with OnPush (5b64712)
• toast: added correct ariaLive values (fc6007e)
• accordion: fix hydration (3f3173a)

Features

• modal: add role option (46c00c6)

BREAKING CHANGES

ngbAccordionBody has been converted from a Directive into a Component. This is was needed in order to fix accordion hydration while not breaking the syntax.
Note that if you were using a template variable to retrieve the DOM element you will need to query the ElementRef instead of the component .

Concretely, the following code with ng-bootstrap 17.0.2:

@Component({
  standalone: true,
  imports: [NgbAccordionModule],
  template: `
    <div ngbAccordion>
      <div ngbAccordionItem [collapsed]="false">
        <!-- header -->
        <div ngbAccordionCollapse>
          <div ngbAccordionBody #myAccordionBody>
            <ng-template>Actual content</ng-template>
          </div>
      </div>
    </div>
  `
})
export class Example {
  readonly myAccordionBody= viewChild.required<ElementRef>('myAccordionBody');
  
  myScrollingFunction() {
    this.myAccordionBody().nativeElement.scrollIntoView();
  }
}

needs to be migrated to the following with ng-bootstrap 18.0.0:

@Component({
  imports: [NgbAccordionModule],
  template: `
    <div ngbAccordion>
      <div ngbAccordionItem [collapsed]="false">
        <!-- header -->
        <div ngbAccordionCollapse>
          <div ngbAccordionBody #myAccordionBody>
            <ng-template>Actual content</ng-template>
          </div>
      </div>
    </div>
  `
})
export class Example {
  readonly myAccordionBody= viewChild.required('myAccordionBody', {read: ElementRef});
  
  myScrollingFunction() {
    this.myAccordionBody().nativeElement.scrollIntoView();
  }
}

This release bumps minimum required versions to Angular 19.0.0.

Bug Fixes

• accordion: respect destroyOnHide with OnPush (5b64712)
• toast: added correct ariaLive values (fc6007e)
• accordion: fix hydration (3f3173a)

BREAKING CHANGES

• ngbAccordionBody converted from a Directive into a Component

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.

Bug Fixes

• datepicker: generate weekday labels in correct order (04010d6)
• datepicker: config not inherited from datepicker-input (db14075), closes #3848
• datepicker: global config not applied (18919c9), closes #4697

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.

Bug Fixes

• datepicker: track weekdays by $index (#4712) (ca1028d)
• datepicker: track weekdays by index to avoid clashes (7c693d6)
• datepicker: type of ngAcceptInputType_weekdays (5ad11bb)
• pagination: track page by index since -1 can be there twice (1d190a8)
• timepicker: get period from angular formatDate (56b0368)
• typeahead track by index in NgbHighlight (#4707) (2085265), closes #4705
• typeahead: track results by index in NgbTypeahead (#4711) (fa8aba9), closes #4702

This release bumps minimum required versions to Angular 17.0.0 and Bootstrap 5.3.2.

Main features:

• dark mode support for all components and demo site.
• new stacked progressbar markup in Bootstrap 5.3 allowed us to do the long-standing stacked progressbar feature request.
• Ethiopian calendar for datepicker.
• old component-based accordion implementation is removed (it was deprecated in 14.1.0 in favor of directive-based implementation).
• we're using new control flow syntax internally and for all demos.

Please make sure to check the BREAKING CHANGES section below.

Bug Fixes

• use setInput where possible for dynamic components (f29a7b5)
• datepicker: fix day hover color in dark mode (519bbc3)
• dropdown: add show class to dropdown toggle when dropdown is open (#4532) (6bf2ab0), closes #4531
• nav: NgbNavLinkBase matches multiple times (02ab48b), closes #4594
• schematics: use getMainFilePath() to get main project file (acd635a)
• tooltip: add offset to align with Bootstrap 5.3 (6fd04af), closes #4574
• datepicker: startDate type should accept dates with days (#4618) (81ec20a), closes #4616
• accordion: allow querying body template (#4625) (472d842), closes #4623
• dropdown: allow setting custom tabindex on items (#4626) (3d9f052), closes #4592
• nav: correct focus handing with keyboard (184b6bd)

Features

• bootstrap 5.3 and dark mode (99c2162), closes #4450
• add axe a11y tests of the demo site (#4588) (b573a2b)
• progressbar: add stacked progressbar (#4621) (1982133)
• datepicker: add ethiopian date picker (bf02fb0), closes #4499
• migrate to the new control flow syntax (6c3570b)
• accordion: remove type from configuration (ed7732a)
• accordion: remove component-based version (7aab9e3)
• dropdown: remove deprecated NgbNavbar directive (c2c8061)

BREAKING CHANGES

• minimum required versions are now Angular 17.0.0, Bootstrap 5.3.2 and Popper 2.11.8
• accordion: removed component-based accordion. It was deprecated in 14.1.0
• accordion: removed type property from the NgbAccordionConfig. It was deprecated in 14.1.0.
• we use inject function internally more than before, so constructor signatures have changed for all components. If you extend our components (and you really shouldn't do it), you might need to update your code.
• nav: NgbNavbar directive is removed, as it is no longer required. It was deprecated in 14.2.0.
• nav: default value for the @Input() keyboard: boolean | 'changeWithArrows' was changed from false to true, meaning that all navs are now keyboard accessible by default and focus between navs moves with arrow keys. Focusing behavior follows the WAI-ARIA tab recommendation as well as Bootstrap's nav implementation. To turn off keyboard support set keyboard to false either on the individual NgbNav or via NgbNavConfig