Angular powered Bootstrap

  • By ng-bootstrap
  • Last update: Jan 3, 2023
  • Comments: 16

NG Bootstrap - Angular powered Bootstrap widgets

npm version Build Status codecov devDependency Status Sauce Test Status

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

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

Github

https://github.com/ng-bootstrap/ng-bootstrap

Comments(16)

  • 1

    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:

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

    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.

    image

    Working with ng1 version: image

    Thanks!

  • 3

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

    • [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*
  • 4

    Bootstrap 5 support

    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:

    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
  • 5

    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

  • 6

    Modal: consider supporting stacked modals

    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.

  • 7

    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:

    • 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?

  • 8

    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

  • 9

    NgbDate culture format and initial model?

    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:

    image

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

    Thanks

  • 10

    Angular 13 support

    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
  • 11

    Typescript 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

  • 12

    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.

  • 13

    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:

    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

  • 14

    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:

    • 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

  • 15

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

  • 16

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