The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular

Overview
ngx-bootstrap

ngx-bootstrap

The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular

npm latest version npm next version
npm version npm downloads
slack

Links

Table of contents

  1. Getting Started
  2. Usage & Demo
  3. Supporting
  4. Installation
  5. Compatibility
  6. Troubleshooting
  7. Contributing
  8. Credits
  9. License

Getting Started

ngx-bootstrap provides Bootstrap components powered by Angular, so you don't need to include original JS components.

Check our Getting started guide if it's your first project with Angular Bootstrap.

Usage & Demo

Bootstrap components for Angular applications, dozens of demos and API documentation could be found here: https://valor-software.com/ngx-bootstrap/.

Supporting NGX-Bootstrap

ngx-bootstrap is an Open Source (MIT Licensed) project, it's an independent project with ongoing development made possible thanks to the support of our awesome backers. If you also would like to show support or simply give back to Open Source community, please consider becoming a backer sponsor of ngx-bootstrap on OpenCollective.

All donated funds are managed transparently on OpenCollective and will be used solely for compensating work and expenses for contributors. Valor Software employees and contractors are not eligible to use these funds.

What's there for you? Proper recognition and exposure of your name/logo/website on our page. Our main sponsors will be presented under this section! Be the first!

Installation

Angular CLI way

Use the Angular CLI ng add command for updating your Angular project.

ng add ngx-bootstrap
Manual way

Install ngx-bootstrap from npm:

npm install ngx-bootstrap --save

Add wanted package to NgModule imports:

import { TooltipModule } from 'ngx-bootstrap/tooltip';

@NgModule({
  ...
  imports: [TooltipModule.forRoot(),...]
  ...
})

Add component to your page:

Simple demo ">

You will need to add bootstrap css:

  • Bootstrap 5
">


   
  • Bootstrap 4
">


   
  • Bootstrap 3
">


   

Setting up the bootstrap version manually

As you may know ngx-bootstrap support several bootstrap.css versions at the same time and has automatic tool to guess current used version of library, but if this guess fails you can specify version of bootstrap.css manually.

Sometimes, your project might contain some library that could interfere with the bootstrap framework, or you might have a customized version of bootstrap. The consequence is that the process of determining bootstrap version might be failed, which can break the UI. In that case, we can still set the bootstrap version manually in the bootstrapping component (i.e. AppComponent):

import { setTheme } from 'ngx-bootstrap/utils';

@Component({...})
export class AppComponent {
  constructor() {
    setTheme('bs3'); // or 'bs4'
    ...
  }
}

How to build lib for development

First time:

git clone https://github.com/valor-software/ngx-bootstrap.git
cd ngx-bootstrap
npm ci
npm run build
npm start

Compatibility

The only two dependencies are Angular and Bootstrap CSS. Here is the versions compatibility list:

ngx-bootstrap Angular Bootstrap CSS
8.0.0 12.x.x - 13.x.x 5.x.x or 4.x.x or 3.x.x
7.1.0 11.x.x - 12.x.x 5.x.x or 4.x.x or 3.x.x
7.0.0 11.x.x - 12.x.x 3.x.x or 4.x.x
6.0.0 9.x.x - 10.x.x 3.x.x or 4.x.x
5.6.x 7.x.x - 9.1.0 3.x.x or 4.x.x
5.0.0 - 5.6.0 7.x.x - 8.x.x 3.x.x or 4.x.x
4.x.x 6.x.x - 7.x.x 3.x.x or 4.x.x
3.x.x 6.x.x - 7.x.x 3.x.x or 4.x.x
2.x.x 2.x.x - 4.x.x 3.x.x or 4.x.x
1.x.x 2.x.x 3.x.x or 4.x.x

Troubleshooting

So if you are in trouble, here's where you can look for help.

The best place to ask questions is on StackOverflow (under the ngx-bootstrap tag) You can also join our Slack channel and link your stackoverflow question there. But try to avoid asking generic help questions directly on Slack since they can easily get lost in the chat. You can also search among the existing GitHub issues.

If, and only if, none of the above helped, please open a new issue.

Contribution

All contributions very welcome! And remember, contribution is not only PRs and code, but any help with docs or helping other developers to solve issues are very appreciated! Thanks in advance!

Please read our contribution guidelines.

Credits

Crossbrowser testing sponsored by Saucelabs Saucelabs

End-to-end testing sponsored by Cypress Cypress

License

MIT

Comments
  • feat(datepicker): add date picker popup version

    feat(datepicker): add date picker popup version

    @valorkin i am trying to use the date-picker popup, instead of date-picker (as per our needs), but i am unable to make it work yet. I was trying out to update the code, but could not make my changes successfully. can i as for your suggestions, some pointers or approach to complete what is left in the popup.

    comp(datepicker) 
    opened by kambojankit 106
  • feat(modal): Implement modal component

    feat(modal): Implement modal component

    Hi,

    The README says Modal (in progress...). Is it true, is sb working on that? Can we share some progress here (in a separate branch presumably)? I'd consider contributing as I need it for my project...

    Thanks for providing more info. Marcin

    enhancement effort3: hard (weeks) 
    opened by ryzy 95
  • fix(positioning): angular 2.2 modal.show is throwing issue

    fix(positioning): angular 2.2 modal.show is throwing issue

    Angular v2.2 broke our get root view component ref hack temporary workaround:

    1. Add ComponentsHelper to AppModule (root module)
    import {ComponentsHelper} from 'ng2-bootstrap/ng2-bootstrap'
    // ...
    providers: [{provide: ComponentsHelper, useClass: ComponentsHelper}],
    
    1. Set root view component ref explicitly in AppComponent (root component)
      public constructor(componentsHelper:ComponentsHelper, vcr:ViewContainerRef) {
        componentsHelper.setRootViewContainerRef(vcr);
      }
    

    I am facing an issue with my ng2-bootstrap modals. For some reason, I am not able to show them.

    Here is my HTML :

    <button (click)="testModal.show()">Show this modal</button>
    
    <div bsModal
         #testModal="bs-modal"
         class="modal fade"
         tabindex="-1"
         role="dialog"
         aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-body">
                    TEST
                </div>
            </div>
        </div>
    </div>
    

    Here is my NgModule:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { MODAL_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
    
    @NgModule({
        declarations: [ MODAL_DIRECTIVES],
        exports:      [ MODAL_DIRECTIVES],
        imports:      [ BrowserModule,
                        FormsModule,
                        HttpModule ],
    })
    export class SharedModule {}
    

    I see this error in the log console : Error: Uncaught (in promise): Token must be defined! and the modal does not show up

    I am running Angular 2 RC5. Is there something I am missing here?

    WIP 
    opened by escarabin 65
  • fix(modal): focus coming out of Modal after pressing Tab key

    fix(modal): focus coming out of Modal after pressing Tab key

    Hi,

    I am using ng2 bootstrap,version 1.3.3 and your modal component in one of our projects.

    Our requirement is to trap the focus inside the modal however the focus is moving outside of the modal on tabbing. It then stays outside the modal until it traverses all the tabs on the page.

    Is there a way you could keep the focus trapped inside the modal until the modal is closed? Or in other words it should continue looping with focus being within the modal.

    Expected behavior – Focus should be trapped inside the modal window and on closing it focus should move to the element which triggers the modal window.

    This is critical interaction for AX users. Appreciate any support you can provide with regards to this.

    effort3: hard (weeks) comp(modal) WIP feat-request BREAKING CHANGE type: accessibility 
    opened by GovindaAgarwal 59
  • RC5 Modal not working in multiple components

    RC5 Modal not working in multiple components

    Hi,

    I am using Angular RC5 and am able to open modal box in the root component (app-component) using viewProviders: [BS_VIEW_PROVIDERS] and keeping the modal box and button in the component template.

    However when i do the same for other components, it triggers an error:

    Error: Uncaught (in promise): No provider for AppComponent!
    

    Any ideas how to fix this please?

    opened by hassanasad 51
  • AoT for datepicker

    AoT for datepicker

    Re-open : https://github.com/valor-software/ng2-bootstrap/issues/1080

    The bug it still there after updating to 1.1.9, please take care to do tests before closing issues, I'll be happy to test it for you if needed. For me it's not an @Hostbinding problem.

    Trying to build with ngc (last version installed) :

    import { DatepickerModule } from 'ng2-bootstrap';
    @NgModule({
      imports: [DatepickerModule],
    })
    export class MyModule {}
    

    Results in :

    dist\tmp\app\node_modules\ng2-bootstrap\components\datepicker\datepicker.component.ngfactory.ts(24,27): error TS2307: Cannot find module './datepicker-inner.component.ngfactory'.
    dist\tmp\app\node_modules\ng2-bootstrap\components\datepicker\datepicker.component.ngfactory.ts(25,27): error TS2307: Cannot find module './daypicker.component.ngfactory'.
    dist\tmp\app\node_modules\ng2-bootstrap\components\datepicker\datepicker.component.ngfactory.ts(26,27): error TS2307: Cannot find module './monthpicker.component.ngfactory'.
    dist\tmp\app\node_modules\ng2-bootstrap\components\datepicker\datepicker.component.ngfactory.ts(27,27): error TS2307: Cannot find module './yearpicker.component.ngfactory'.
    dist\tmp\app\node_modules\ng2-bootstrap\components\datepicker\datepicker.component.ngfactory.ts(178,18): error TS2341: Property 'datePicker' is private and only accessible within class 'DatePickerComponent'.
    dist\tmp\app\node_modules\ng2-bootstrap\components\timepicker\timepicker.component.ngfactory.ts(755,42): error TS2445: Property 'updateHours' is protected and only accessible within class 'TimepickerComponent' and its subclasses.
    

    Seems Datepicker is not AoT ready ;). Hope it will be soon.

    opened by lifaon74 49
  • No provider for NgModel when running tests

    No provider for NgModel when running tests

    I've moved to RC6. Dev and prod are running well, but when running tests I get:

    No provider for NgModel ("[ERROR ->]<datepicker ngModel></datepicker>"): [email protected]:0
        Error: Uncaught (in promise): Error: Template parse errors:
            at resolvePromise (webpack:///~/zone.js/dist/zone.js:558:0 <- config/spec-bundle.js:89579:32)
            at resolvePromise (webpack:///~/zone.js/dist/zone.js:543:0 <- config/spec-bundle.js:89564:18)
            at webpack:///~/zone.js/dist/zone.js:591:0 <- config/spec-bundle.js:89612:18
            at ZoneDelegate.invokeTask (webpack:///~/zone.js/dist/zone.js:365:0 <- config/spec-bundle.js:89386:38)
            at ProxyZoneSpec.onInvokeTask (webpack:///~/zone.js/dist/proxy.js:130:0 <- config/spec-bundle.js:88910:44)
            at ZoneDelegate.invokeTask (webpack:///~/zone.js/dist/zone.js:364:0 <- config/spec-bundle.js:89385:43)
            at Zone.runTask (webpack:///~/zone.js/dist/zone.js:265:0 <- config/spec-bundle.js:89286:48)
            at drainMicroTaskQueue (webpack:///~/zone.js/dist/zone.js:497:0 <- config/spec-bundle.js:89518:36)
    

    I'm not using the datepicker. I've just imported Ng2BootstrapModule in my Module.

    opened by binarious 46
  • Angular v10 & ngx-bootstrap v6.0.0 in libraries build issue [some workaround here]

    Angular v10 & ngx-bootstrap v6.0.0 in libraries build issue [some workaround here]

    Bug description:

    When I upgrade to v6.0.0 version with Angular v10 Library project, I've been thrown with the below error -

    Error during template compile of 'CoreModule' Function calls are not supported in decorators but 'PopoverModule' was called. Error during template compile of 'CoreModule' Function calls are not supported in decorators but 'TabsModule' was called. Error during template compile of 'CoreModule' Function calls are not supported in decorators but 'TooltipModule' was called. Error during template compile of 'CoreModule' Function calls are not supported in decorators but 'ModalModule' was called. Error during template compile of 'CoreModule' Function calls are not supported in decorators but 'BsDropdownModule' was called.

    In the above, I've added the bootstrap, in CoreModule, like below -

    import { PopoverModule } from 'ngx-bootstrap/popover'; import { TabsModule } from 'ngx-bootstrap/tabs'; import { TooltipModule } from 'ngx-bootstrap/tooltip'; import { ModalModule } from 'ngx-bootstrap/modal';

    P Versions of ngx-bootstrap, Angular, and Bootstrap:

    ngx-bootstrap: v6.0.0

    Angular: v10

    Bootstrap: 4.0

    Build system: Angular CLI, System.js, webpack, starter seed: Angular CLI

    Expected behavior

    Build should happen. It was working fine with Angular v9.x & v5.3.2.

    opened by roopeshreddy 44
  • make ng2-bootstrap compatible with angular-cli

    make ng2-bootstrap compatible with angular-cli

    Can you make ng2-bootstrap easy to install with angular-cli ? e.g., ng install ng2-bootstrap

    Making 3rd party libraries compatible with angular-cli: https://github.com/angular/angular-cli/blob/master/docs/ng-install.md

    example compatible 3rd party libraries: ng2-jwt, ng2-uploader, ng2-slimscroll, ng2-translate

    I guess you have to change "main": "ng2-bootstrap.js" --> "main": "ng2-bootstrap.ts" in package.json

    enhancement comp(build) 
    opened by xmlking 44
  • feat(datepicker): add regional settings

    feat(datepicker): add regional settings

    Hi,

    I'm not sure this is actually an issue. But I didn't find a way of setting regional configuration on the datepicker component. I'd like to use it in french projects for example, and all labels are set in english.

    Is there a way of doing that ? I see that the datepicker is inspired by the jquery.ui datepicker component, which allows that.

    enhancement comp(datepicker) 
    opened by johanchouquet 42
  • Modal component causes 'Error: Token must be defined!' for AoT runtime

    Modal component causes 'Error: Token must be defined!' for AoT runtime

    I use shared module to define Modals and share it with different parts of the app

    import { NgModule, ModuleWithProviders } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    
    import { ModalModule } from 'ng2-bootstrap';
    
    
    @NgModule({
      imports: [
          CommonModule,
          ModalModule.forRoot()
      ],
      exports: [
          CommonModule,
          FormsModule,
          ModalModule
      ]
    })
    export class SharedModule {
      static forRoot(): ModuleWithProviders {
        return {
          ngModule: SharedModule
        };
      }
    }
    

    JIT compilation and runtime work fine. AoT compilation works fine but during runtime I got this error:

    EXCEPTION: Uncaught (in promise): Error: Token must be defined!
    Error: Token must be defined!
    

    The issue disappears when I remove modal component div (bsModal) from template.

    I use Angular 2.4.1, ng2-bootstrap 1.1.16-11

    Here is a repo with steps to reproduce: https://github.com/irsick/ng2-bootstrap-bsModals-issue

    Probably it's related to #986

    issue comp(modal) 
    opened by RomaDotDev 41
  • Documentation of 8.0.0 is unavailable

    Documentation of 8.0.0 is unavailable

    Description: While trying to access the documentation for 8.0.0 a few minutes ago, the documentation seems not to be available. While the index.html seems to be present, runtime.js, polyfills.js and main.js are responding with a 404.

    The screenshot below shows the exact behaviour with URL and Network Monitor. This has been verified with multiple Browsers (and without Extensions) to ensure nothing is accidentally blocked.

    Screenshot 2022-09-19 at 16 26 02

    I'm trying to solve my issues using 9.x docs but it is highly unfortunate to not have documentation available.

    opened by theSmokingFrog 0
  • ng add ngx-bootstrap giving error Cannot find module 'C:\Workspace\angular-demo\node_modules\@schematics\angular\utility\test.js'

    ng add ngx-bootstrap giving error Cannot find module 'C:\Workspace\angular-demo\node_modules\@schematics\angular\utility\test.js'

    I create a new Angular project by runnning command ng new angular-demo after that I am trying to run command ng add ngx-bootstrap. It is installing ngx-bootstrap 9.0.0 but then giving error and not updating all required configuration:

    image

    Versions of ngx-bootstrap, Angular, and Bootstrap:

    ngx-bootstrap: 9.0.0

    Angular: 14.2.0

    Bootstrap: Not added as ng add ngx-bootstrap is broken

    Build system: Angular CLI: 14.2.3 Node: 16.14.0 Package Manager: npm 8.19.1 OS: win32 x64

    Expected behavior

    It should add all dpendeicies and update the configuration.

    opened by nitin27may 0
  • TabSet display: none for not active pane blocks any modal to be visible

    TabSet display: none for not active pane blocks any modal to be visible

    <tabset>
    <tab class="active">
     <modal1> <modal1>
    </tab>
    <tab >
    <modal2> <modal2>
    </tab>
    </tabset>
    

    if you have some components that is in tabs that are not active then those modalsv(modal2 in the above example) cannot be used. Backdrop works but the modal is not visible as the following in place.

    .tab-content > .tab-pane {
      display: none;
    }
    

    Is there any way to avoid this issue other than moving all components outside of tab?

    opened by adurmus 0
  • ngb-tabset autogenerated html - accessibility issues

    ngb-tabset autogenerated html - accessibility issues

    This is the following snippet generated by ngb-tablist which violates a couple of 508 compliance rules.

    <ul role="tablist" class="nav nav-tabs justify-content-start">
        <li class="nav-item">
          <a class="nav-link active" href="" role="tab" id="tab2" aria-controls="tab2-panel" aria-selected="true" aria-disabled="false">
      .......
    

    Required ARIA parent role not present: tablist List item does not have a <ul>, <ol> parent element without a role, or a role="list"

    Adding role='tablist' semantically makes it a list and so Li is without a parent. To solve either of them the markup can be replaced with divs or construct the tabs using UL and LI with correct roles included.

    Here is a few reference articles

    https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html https://stackoverflow.com/questions/69756534/how-to-fix-role-tablist-role-tab-axe-violations

    opened by qjv6 0
Releases(v9.0.0)
Owner
Valor Software
Leader in the Angular development space since 2013. Creators of ngx-bootstrap. We provide design, architecture, engineering, product guidance and open source.
Valor Software
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 6 May 5, 2022
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
NG Bootstrap - Angular powered Bootstrap widgets

NG Bootstrap - Angular powered Bootstrap widgets Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angula

ng-bootstrap 8k Sep 17, 2022
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 3 Jul 20, 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 97 Sep 14, 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 6 Sep 13, 2022
An enterprise-class UI components based on At UI Design and Angular. 🚀 🚀 🚀

An enterprise-class UI components based on At UI Design and Angular. ?? ?? ??

塟愛鎵镞de栤仯 113 Mar 3, 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 86 Feb 3, 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 23k Sep 19, 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 909 Sep 18, 2022
Heavily inspired by Angular Forms, this package provides utilities for complex Model-driven form management in Lit-based Web Components.

Heavily inspired by Angular Forms, this package provides utilities for complex Model-driven form management in Lit-based Web Components.

Michele Stieven 7 Aug 30, 2022
NGX-YOUI is a Highly customizable library of Angular UI components for content and styles

NGX-YOUI NGX-YOUI is an Angular UI Library that can be highly customized with content and styles. You can easily integrate with other CSS frameworks a

NGX-YOUI 4 Aug 18, 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 Sep 6, 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 Sep 18, 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.3k Sep 21, 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.4k Sep 19, 2022
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 Aug 31, 2022
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 Sep 25, 2022
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 998 Jun 21, 2022