NG Bootstrap - Angular powered Bootstrap widgets

Overview

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

Comments
  • animations: initial push for animations

    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
    type: feature 
    opened by pkozlowski-opensource 76
  • Dropdown append to body

    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!

    component: dropdown type: feature 
    opened by marcalj 67
  • Server side rendering with universal

    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*
    type: feature type: ssr 
    opened by pkozlowski-opensource 58
  • Bootstrap 5 support

    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
    type: feature breaking change bootstrap 5 
    opened by maxokorokov 52
  • Add support to angular 14

    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

    breaking change 
    opened by mshima 50
  • Modal: consider supporting stacked modals

    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.

    component: modal type: feature 
    opened by pkozlowski-opensource 42
  • Dealing with styling of

    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?

    type: accessibility 
    opened by pkozlowski-opensource 41
  • Datepicker Popup - Close when outside is clicked/touched

    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

    type: feature needs: breaking change component: datepicker 
    opened by k-schneider 40
  • NgbDate culture format and initial model?

    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

    type: feature component: datepicker 
    opened by asadsahi 35
  • Angular 13 support

    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
    breaking change 
    opened by maxokorokov 32
  • Typescript 3.1.1 build error

    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

    type: bug 
    opened by mgotovkin-plana 31
  • Installing ng-bootstrap 14.0 with Angular CLI 15.0.4 leads to

    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

    opened by janopae 0
  • Tooltips on disabled buttons in input-groups/btn-groups

    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

    opened by bjCorrosionInstruments 1
  • Regression: modal components don't have the correct injector

    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

    component: modal type: regression 
    opened by jnizet 1
  • Expose Modal Window to support Dynamic Modal Resizing

    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.

    opened by jebner 0
  • feat(accordion): accordion with directives

    feat(accordion): accordion with directives

    Here is the main public API:

    @Directive({selector: '[ngbAccordionHeader]'})
    export class NgbAccordionHeader {}
    
    @Directive({selector: '[ngbAccordionToggle]'})
    export class NgbAccordionToggle {}
    
    @Directive({
      selector: '[ngbAccordionCollapse]',
      hostDirectives: [
        { directive: NgbCollapse },
      ],
    })
    export class NgbAccordionCollapse {
      @Input() set ngbAccordionCollapse(collapsed: boolean) { ... }
    }
    
    @Component({
      selector: '[ngbAccordionBody]',
      template: ` <ng-template [ngTemplateOutlet]="shouldPutBodyInDOM() ? this.template : null"></ng-template>`,
    })
    export class NgbAccordionBody {
    	@ContentChild(TemplateRef) template: TemplateRef<any>;
    	@Input() destroyOnHide = true;
    }
    
    @Directive({ selector: '[ngbAccordionItem]'})
    export class NgbAccordionItem {
      @Input('ngbAccordionItem') id: string;
    
      get headingId() { ... }
      get collapseId() { ... }
    
      set collapsed(collapsed: boolean) { ... }
      get collapsed() { ... }
    
      toggle() { ... }
    }
    
    @Directive({ selector: '[ngbAccordion]'})
    export class NgbAccordionDirective {
      @Input() animation: boolean;
      @Input() closeOthers: boolean;
    
      @Output() shown = new EventEmitter<string>();
      @Output() hidden = new EventEmitter<string>();
    
      toggle(id: string) { ... }
    }
    
    

    Here is how it is supposed to be used:

    <div
      ngbAccordion
      [animation]="..."
      [closeOthers]="..."
      (shown)="..."
      (hidden)="..."
    >
      <div ngbAccordionItem="1">
        <h2 ngbAccordionHeader>
          <button ngbAccordionToggle>Accordion Item #1</button>
        </h2>
        <div [ngbAccordionCollapse]="false">
          <div ngbAccordionBody [destroyOnHide]="false">
            <ng-template> ... </ng-template>
          </div>
        </div>
      </div>
    </div>
    
    component: accordion 
    opened by maxokorokov 0
  • Change background color of calendar header for dark mode

    Change background color of calendar header for dark mode

    Bug description:

    I'm testing ng-bootstrap with the dark mode of bootstrap 5.3.

    There is an issue in the calendar header because the style is background-color: var(--bs-light); and the bs-light variable is not override in dark mode.

    We can use background-color: rgba(var(--bs-body-color-rgb), 0.03);

    It's not exactly the same color: #f8f9fa => #f8f8f8

    Link to minimally-working StackBlitz that reproduces the issue:

    Original: https://stackblitz.com/edit/angular-yhzr1g-sr7ahd?file=src%2Findex.html,src%2Fmain.ts

    Proposal fix: https://stackblitz.com/edit/angular-yhzr1g?file=src/index.html

    Versions of Angular, ng-bootstrap and Bootstrap:

    Angular: 15.0.2

    ng-bootstrap: 14.0.0-rc1

    Bootstrap: 5.3.0-alpha1

    component: datepicker type: customization 
    opened by bastienmoulia 0
Releases(14.0.0)
  • 14.0.0(Dec 7, 2022)

    This release bumps minimum supported versions to Angular 15.0.0, Bootstrap 5.2.3 and Popper 2.11.6.

    It also introduces support for standalone components, which means that you can now import ng-bootstrap inside your standalone components in 3 ways:

    imports: [NgbModule]                     // import all ng-bootstrap components
    imports: [NgbNavModule]                  // import a certain type of components
    imports: [NgbNav, NgbNavOutlet, etc... ] // import required components individually
    

    The demo site, stackblitzes and documentation have been updated to reflect these changes.

    Bug Fixes

    • accordion: add missing forwardRef (9e01092)
    • datepicker: add missing forwardRef (1e68c9b)

    Features

    • migrate all components and directives to standalone (5e6d11c)
    Source code(tar.gz)
    Source code(zip)
  • 14.0.0-rc.1(Nov 29, 2022)

  • 14.0.0-rc.0(Nov 29, 2022)

    This release bumps minimum supported versions to Angular 15.0.0, Bootstrap 5.2.3 and Popper 2.11.6.

    It also introduces support for standalone components, which means that you can now import ng-bootstrap inside your standalone components in 3 ways:

    imports: [NgbModule]                     // import all ng-bootstrap components
    imports: [NgbNavModule]                  // import a certain type of components
    imports: [NgbNav, NgbNavOutlet, etc... ] // import required components individually
    

    The demo site, stackblitzes and documentation have been updated to reflect these changes.

    Source code(tar.gz)
    Source code(zip)
  • 13.1.1(Nov 17, 2022)

  • 13.1.0(Oct 18, 2022)

    This release adds several features, notably:

    Bug Fixes

    • collapse: restore previous transition logic (#4388) (ec372c3)
    • collapse: solved running transition twice (#4374) (9c8bf98)
    • datepicker: add NgbDateStructAdapter to export list (#4335) (a6e9f2e)
    • positioning: generate correct RTL placements for popper (5379cd0)
    • offcanvas: change animations to be like in Bootstrap 5.2.0 (#4366) (cb4406d)
    • schematics: install @angular/localize to devDependencies (5289e8a)
    • timepicker: add exportAs property for ngbTimepicker (#3980) (94e7b35)

    Features

    • positioning: allow configuring Popper via popperOptions API (#4323) (a6f6803)
    • collapse: add horizontal collapse (98f0527)
    • offcanvas: add static backdrop option (#4367) (fe4c798)
    • popover: allow specifying target for popover (711bfd3)
    • progressbar: add aria-label (6a3ebaa), closes #4133
    • rating: allow overriding tabindex with provided value (#4309) (9d80e66)
    • tooltip: allow specifying target for tooltip (dc82372)
    Source code(tar.gz)
    Source code(zip)
  • 13.0.0(Jul 28, 2022)

    This release adds Angular 14.1 and Bootstrap 5.2.0 support. It also removes deprecated checkboxes and radio buttons.

    Bug Fixes

    • datepicker: better display for a disabled datepicker (52ec5b5)
    • datepicker: use -bs-xxx variables for colors (3012aaf)
    • replace ComponentFactory with new createComponent API (9a011f3), closes #4343
    • use new setInput() API instead of setting inputs manually (eec4e43)

    BREAKING CHANGES

    • buttons: Checkbox and Radio buttons are no longer a part of ng-bootstrap, please use native Angular. They were deprecated in ng-bootstrap 12, see this page for more details.
    Source code(tar.gz)
    Source code(zip)
  • 13.0.0-beta.1(Jun 14, 2022)

    This is the first beta version that adds Angular 14 support.

    BREAKING CHANGES

    • buttons: Checkbox and Radio buttons are no longer a part of ng-bootstrap, please use native Angular. They were deprecated in ng-bootstrap 12, see this page for more details.
    Source code(tar.gz)
    Source code(zip)
  • 12.1.2(May 17, 2022)

    Bugfixes for popper positioning related to tooltip/popover arrow placement and overall performance.

    Bug Fixes

    • positioning: not all classnames are removed correctly after change detection (9775246), closes #4327
    • pagination: allow for custom and null 'size' values (8df5f74), closes #3816
    • datepicker: schedule positioning calculations correctly (745a64d)
    • dropdown: schedule positioning calculations correctly (077047e)
    • popover: schedule positioning calculations correctly (6b16b8d)
    • tooltip: schedule positioning calculations correctly (662f2b6), closes #4321
    • typeahead: schedule positioning calculations correctly (79454d1)
    Source code(tar.gz)
    Source code(zip)
  • 12.1.1(Apr 29, 2022)

  • 12.1.0(Apr 28, 2022)

  • 12.0.2(Apr 7, 2022)

    More bugfixes for the Bootstrap 5 release

    Bug Fixes

    • datepicker: add offset to match Bootstrap (47fc2fe)
    • datepicker: do not scroll when opening with container='body' (#4294) (112b507), closes #4290
    • datepicker: ensure popup is shown above modal (#4282) (029ac2a), closes #4278
    • dropdown: add offset to match Bootstrap #4297 (9f2fe0d)
    • dropdown: disable host button of disabled dropdown item (4f71568), closes #4301
    • dropdown: ensure popup is shown above modal (0a41501)
    • dropdown: set tabIndex to -1 on disabled dropdown items (1ab5d21), closes #4301
    • modal: remove visual 'twitch' when closing (#4295) (15246f2), closes #4293
    • popover: change offset to match Bootstrap (90b4715)
    • rating: changing [max] doesn't update displayed number of stars (9b49136), closes #4132
    • typeahead: add offset to match Bootstrap (7f636ed)
    • typeahead: ensure popup is shown above modal (d10df5d)
    Source code(tar.gz)
    Source code(zip)
  • 11.0.1(Apr 7, 2022)

    This release contains some bugfixes for those who still remain on Bootstrap 4

    Bug Fixes

    • accordion: accept ids that start with a digit (#4196) (ab87fc7), closes #4195
    • dropdown: disable host button of disabled dropdown item (ba19329), closes #4301
    • dropdown: set tabIndex to -1 on disabled dropdown items (9cdc0fc), closes #4301
    • modal: allows to set an HTMLElement as container in NgbModalConfig (#4161) (fb01f15), closes #4160
    • modal: remove visual 'twitch' when closing (#4295) (a29b445), closes #4293
    • modal: scrollbar issue with stacked modals (#4256) (cf13227), closes #4255
    • rating: changing [max] doesn't update displayed number of stars (9a66076), closes #4132
    Source code(tar.gz)
    Source code(zip)
  • 12.0.1(Mar 21, 2022)

    This release contains a couple of bugfixes for the Bootstrap 5 release.

    ng-bootstrap web site was updated with documentation for older releases (now there is a dropdown in the header to switch between versions).

    Bug Fixes

    • accordion: accept ids that start with a digit (#4196) (c2eef9a), closes #4195
    • carousel: fix hidden carousel indicators (#4259) (bee2668), closes #4200 #4253
    • datepicker: respond to autoClose changes dynamically (34e3d53)
    • dropdown: respond to autoClose changes dynamically (1def999)
    • modal: allows setting an HTMLElement as container in NgbModalConfig (#4161) (a93c439), closes #4160
    • modal: scrollbar issue with stacked modals (#4256) (9da624d), closes #4255
    Source code(tar.gz)
    Source code(zip)
  • 12.0.0(Feb 14, 2022)

    This release adds Bootstrap 5 support.

    Features

    • upgrade to bootstrap 5.0.0 (5f51908)
    • carousel: rename left right classes for positioning (bebd9ab)
    • datepicker: rename left right classes for positioning (a821d49)
    • dropdown: rename left right classes for positioning (da5d6d1)
    • popover: rename left right classes for positioning (23da190)
    • positioning: rename left and right classes (486a929)
    • tooltip: rename left right classes for positioning (e9bb545)
    • typeahead: rename left right classes for positioning (4628503)

    Bug Fixes

    • .ml- and .mr- to .ms- and .me- (ca40910)
    • .pl- and .pr- to .ps- and .pe- (ae3a3fe)
    • .text-left .text-right to .text-start .text-end (65f8954)
    • accordion: follow bootstrap 5 markup (29f61d5)
    • accordion: update classes for the headers (7565054)
    • alert: new css class for close button (#3976) (43bae41)
    • button: button group (d598cb4)
    • dropdown: manage static menu (65ba6c3)
    • modal: adds overflow: hidden from code and fixes scrollbar measurement (5c58309), closes #4128
    • modal: close button (4794632)
    • modal: upgrade z-index for backdrop (fc84cb1)
    • popover: fix positioning after the beta2 (e782244)
    • positioning: use popper 2 for positioning (#4129) (5842eb5)
    • tabset: radios on the tabset demo (2294275)
    • toast: default delay and toasts container removal (ed5aca9)
    • toast: new css class for btn-close (#3986) (7dcead9)
    • add navbar containers when needed (9b0ade5)
    • change custom-select by form-select (5ec43b6)
    • e2e failed because of changed error message (e8a604a)
    • e2e failed because of dependencies (ff66111)
    • icon layout in input-group (e4ac56a)
    • margins/layout issues (e5e8461)
    • refactor form-inline and form-group (ddfde57)
    • rename float-left float-right to float-start float-end (292e123)
    • renamed .font-weight- utilities as .fw- (#3979) (1c2add3)
    • renamed .sr-only to .visually-hidden (#3982) (09eb6b2)
    • small sidebar fixes (a6f4dac)

    BREAKING CHANGES

    • positioning: ng-bootstrap adds "@popperjs/core": "^2.10.2" as a peer dependency. All positioning logic for datepicker, dropdown, popover, tooltip and typeahead is outsourced to popper.js.
    • NgbSlideEventDirection : LEFT and RIGHT have been renamed to START and END

    Before:

    NgbSlideEventDirection.LEFT
    NgbSlideEventDirection.RIGHT
    

    After:

    NgbSlideEventDirection.START
    NgbSlideEventDirection.END
    
    Source code(tar.gz)
    Source code(zip)
  • 11.0.0(Dec 16, 2021)

    This release adds Angular 13 support.

    Apologies for the version mixup with this release, please use this guide:

    • ng-bootstrap 10 (stable) -> Angular 12 and Bootstrap 4
    • ng-bootstrap 11 (stable) -> Angular 13 and Bootstrap 4
    • ng-bootstrap 12 (beta) -> Angular 13 and Bootstrap 5

    Bug Fixes

    • remove 'entryComponents' from the code (a6fd72b)
    • remove deprecated 'ComponentFactoryResolver' (60514a3)
    • accordion: fix broken collapse animation (801093a)
    • datepicker: fix header colors (c24880c)
    Source code(tar.gz)
    Source code(zip)
  • 12.0.0-beta.4(Nov 22, 2021)

    This is a republsih of 12.0.0-beta.3 that was corrupted.

    This 4th beta release for Bootstrap 5 adds Angular 13 support and uses Popper.js for positioning. Schematics are not yet updated for this version.

    Apologies for the version mixup with this release, please use this guide:

    • ng-bootstrap 10 (stable) -> Angular 12 and Bootstrap 4
    • ng-bootstrap 11 (rc) -> Angular 13 and Bootstrap 4
    • ng-bootstrap 12 (beta) -> Angular 13 and Bootstrap 5

    Features

    • positioning: use popper 2 for positioning (#4129) (5842eb5)

    BREAKING CHANGES

    • positioning: ng-bootstrap adds "@popperjs/core": "^2.10.2" as a peer dependency. All positioning logic for datepicker, dropdown, popover, tooltip and typeahead is outsourced to popper.js.
    Source code(tar.gz)
    Source code(zip)
  • 11.0.0-rc.0(Nov 22, 2021)

    This release adds Angular 13 support.

    No code library changes are planned after this, but still some internal CI tooling needs to be updated (see #4178 for details).

    Apologies for the version mixup with this release, please use this guide:

    • ng-bootstrap 10 (stable) -> Angular 12 and Bootstrap 4
    • ng-bootstrap 11 (rc) -> Angular 13 and Bootstrap 4
    • ng-bootstrap 12 (beta) -> Angular 13 and Bootstrap 5

    Bug Fixes

    • remove 'entryComponents' from the code (a6fd72b)
    • remove deprecated 'ComponentFactoryResolver' (60514a3)
    Source code(tar.gz)
    Source code(zip)
  • 11.0.0-beta.2(Jul 5, 2021)

  • 10.0.0(Jul 1, 2021)

    This release adds Angular 12 support

    BREAKING CHANGES

    • datepicker: The deprecated datepicker @Input() showWeekdays: boolean is removed from NgbDatepicker and NgbInputDatepicker. It was replaced by @Input() weekdays: TranslationWidth | boolean; that also accepts TranslationWidth if necessary.

    BEFORE:

    <!-- datepicker -->
    <ngb-datepicker [showWeekdays]="true"></ngb-datepicker>
    <input ngbDatepicker [showWeekdays]="true"></input>
    
    <!-- datepicker config -->
    constructor(config: NgbDatepickerConfig) {
      config.showWeekdays = true;
    }
    

    AFTER:

    <!-- datepicker -->
    <ngb-datepicker [weekdays]="true"></ngb-datepicker>
    <input ngbDatepicker [weekdays]="true"></input>
    
    <!-- datepicker config -->
    constructor(config: NgbDatepickerConfig) {
      config.weekdays = TranslationWidth.Short;
    }
    
    • datepicker: This change concerns you if you're creating custom datepicker calendars and i18ns.

    The deprecated datepicker getWeekdayShortName(weekday: number): string; is removed from NgbDatepickerI18n. It was replaced by getWeekdayLabel(weekday: number, width?: TranslationWidth): string; to add TranslationWidth option and align naming.

    BEFORE:

    @Injectable()
    export class MyDatepickerI18n extends NgbDatepickerI18n {
      getWeekdayShortName(weekday: number) { return 'your weekday short name'; }
    }
    

    AFTER:

    @Injectable()
    export class MyDatepickerI18n extends NgbDatepickerI18n {
      getWeekdayLabel(weekday: number, width?: TranslationWidth) { return 'your weekday short name'; }
    }
    
    Source code(tar.gz)
    Source code(zip)
The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular

ngx-bootstrap The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular Links Documentation Release Notes Slack

Valor Software 5.4k Jan 8, 2023
Angular Library workspace to creating and testing angular libraries

Library Workspace Run Locally Clone the project https://github.com/sametcelikbicak/library-workspace.git Go to the library project directory cd li

Samet ÇELİKBIÇAK 4 Nov 1, 2022
Sam4Sc - a migration assistant for Angular to SCAM (Single Angular Component Modules) and Standalone Components

Sam4Sc - a migration assistant for Angular to SCAM (Single Angular Component Modules) and Standalone Components

Rainer Hahnekamp 7 Nov 16, 2022
Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.

Getting Started Clarity Angular is published as two npm packages: Contains the static styles for building HTML components. Contains the Angular compon

VMware Clarity 145 Dec 29, 2022
An example application that uses file-based routing with Angular, Analog, Vite with the Angular Router

Angular, Vite, and File-based routes This is an example application that uses Angular, Analog, and Vite for file-based routing. Routes are places in t

Brandon 9 Sep 25, 2022
Angular 11 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 Angular Angular 12 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBAngular 5 Demo 500+ material UI components Super s

MDBootstrap 1.1k Dec 30, 2022
Native AngularJS (Angular) directives for Bootstrap

Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!

AngularUI 14.4k Jan 3, 2023
A set of UI components for use with Angular 2 and Bootstrap 4.

#Fuel-UI A set of UI components for use with Angular 2 and Bootstrap 4. See Fuel-UI homepage for live demo and documentation. ##Dependencies Node Gulp

Fuel Interactive 302 Jul 4, 2022
Monorepo for all the tooling related to using ESLint with Angular

Angular ESLint Monorepo for all the tooling which enables ESLint to lint Angular projects

angular-eslint 1.4k Dec 29, 2022
Reactive Extensions for Angular

RxAngular offers a comprehensive toolset for handling fully reactive Angular applications with the main focus on runtime performance and template rendering.

RxAngular 1.5k Jan 5, 2023
Semantic UI Angular Integrations

Semantic-UI-Angular Semantic-UI-Angular is a pure AngularJS 1.x set of directives for Semantic-UI components. We are considering Angular 2 support in

Semantic Org 561 Dec 28, 2022
The code for a set of Angular 6+ components for the PatternFly project.

The code for a set of Angular 6+ components for the PatternFly project. Note that the release/3.x branch supports Angular 4 and 5.

PatternFly 87 Nov 15, 2022
Component infrastructure and Material Design components for Angular

Official components for Angular The Angular team builds and maintains both common UI components and tools to help you build your own custom components

Angular 23.2k Jan 3, 2023
Angular UI Component Library based on Ant Design

NG-ZORRO An enterprise-class Angular UI component library based on Ant Design. English | 简体中文 ✨ Features An enterprise-class UI design system for Angu

NG-ZORRO 8.3k Jan 6, 2023
Angular 2 building blocks :package: based on Semantic UI

Angular2 & Semantic UI Angular2 - Semantic UI Live demo ng-semantic.herokuapp.com Angular 2 Semantic UI version: 2.2.2 Installation npm install ng-sem

Vlado Tesanovic 995 Dec 23, 2022
Native Angular components & directives for Lightning Design System

ng-lightning This library contains native Angular components and directives written from scratch in TypeScript using the Lightning Design System CSS f

null 910 Dec 8, 2022
🚀 Style and Component Library for Angular

ngx-ui Component & Style Library for Angular by Swimlane. Installing npm i @swimlane/ngx-ui --S Install the project's peer depencencies (moment, codem

Swimlane 654 Dec 24, 2022
Lightweight, Material Design inspired go to top button. No dependencies. Pure Angular!

Angular ScrollTop Button Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular! ✓ Angular 13, Ivy

BART! 19 Dec 18, 2022
Customizable Angular UI Library based on Eva Design System

Nebular Documentation | Stackblitz Template | UI Bakery - Angular UI Builder | Angular templates Nebular is a customizable Angular 10 UI Library with

Akveo 7.7k Dec 31, 2022