Angular powered Bootstrap

  • By ng-bootstrap
  • Last update: Nov 29, 2022
  • 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 [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

  • 12

    demo: update the getting started guide

    Before submitting a pull request, please make sure you have at least performed the following:

    • [x] read and followed the CONTRIBUTING.md and DEVELOPER.md guide.
    • [x] built and tested the changes locally.
    • [ ] added/updated any applicable tests.
    • [ ] added/updated any applicable API documentation.
    • [x] added/updated any applicable demos.
  • 13

    ng-bootstrap is not supported by angular version 14.2.0

    Bug description:

    While doing npm i @ng-bootstrap/ng-bootstrap I got this following error:

    npm ERR! Could not resolve dependency:
    npm ERR! @ng-bootstrap/[email protected]"*" from the root project
    npm ERR!
    npm ERR! Conflicting peer dependency: @angular/[email protected]
    npm ERR! node_modules/@angular/core
    npm ERR!   peer @angular/[email protected]"14.2.12" from @angular/[email protected]
    npm ERR!
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    

    Versions of Angular, ng-bootstrap:

    Angular: 14.2.0

    ng-bootstrap:13.1.1

    I think the version is not supported by latest version of angular. I really need to use ng-bootstrap in my angular 14.2 project if you guys can make it compatible your effort will be highly appreciated.

  • 14

    ERROR TypeError: this._applicationRef.attachView is not a function

    Bug description:

    Getting ERROR TypeError: this._applicationRef.attachView is not a function

    Angular: 13.2.7

    ng-bootstrap: 11.0.1

    Bootstrap: 5.2.3

    Even tried with: ng-bootstrap 12.0.1 12.0.0 but the same issue exist.

    image

  • 15

    Popovers styled with square corners on the left side when inside an input group

    Bug description:

    Popovers are styled with square corners on the left side and round corners on the right side when displayed for elements inside an input group. The following CSS rule is being applied to the popover:

    .input-group>.form-floating:not(:first-child)>.form-control, .input-group>.form-floating:not(:first-child)>.form-select, .input-group>:not(:first-child):not(.dropdown-menu):not(.form-floating):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    

    Also, the button in my StackBlitz example gets square corners on the right side only when the popover is open. I believe the issue is that the popover is being considered as another element of the input group, so both the popover and the button are getting the corresponding styles from input-group. In case it helps, the CSS rule above is ignoring tooltips via :not(.valid-tooltip), shouldn't the popovers be ignored as well? This issue cannot be reproduced if using Boostrap's JavaScript so I'm guessing it is related to ng-bootstrap.

    Link to minimally-working StackBlitz that reproduces the issue:

    The following StackBlitz example includes buttons inside and outside an input group, for comparison purposes. https://stackblitz.com/edit/angular-xbede4

    Versions of Angular, ng-bootstrap and Bootstrap:

    Angular: 14.2.11

    ng-bootstrap: 13.1.1

    Bootstrap: 5.2.0 (but also 5.2.2)

  • 16

    Multiple Popper warnings when tooltips or popovers are inside an input group

    Bug description:

    A Popper warning appears in the console every time a tooltip or popover is opened for elements inside an input group. This issue cannot be reproduced if using Boostrap's JavaScript so I'm guessing it is related to ng-bootstrap. The warning message is:

    Popper: CSS "margin" styles cannot be used to apply padding between the popper and its reference element or boundary. To replicate margin, use the offset modifier, as well as the padding option in the preventOverflow and flip modifiers.

    Link to minimally-working StackBlitz that reproduces the issue:

    The following StackBlitz examples include buttons inside and outside an input group, for comparison purposes. The same issue occurs with inputs when inside an input group.

    For tooltips: https://stackblitz.com/edit/angular-bfefis

    For popovers: https://stackblitz.com/edit/angular-xbede4

    Versions of Angular, ng-bootstrap and Bootstrap:

    Angular: 14.2.11

    ng-bootstrap: 13.1.1

    Bootstrap: 5.2.0 (but also 5.2.2)