Native AngularJS (Angular) directives for Bootstrap

Related tags

Angular bootstrap
Overview

Project Status (please read)

Due to Angular's continued adoption, our creation of the Angular version of this library, and the the project maintainers' moving on to other things, this project is considered feature-complete and is no longer being maintained.

We thank you for all your contributions over the years and hope you've enjoyed using this library as much as we've had developing and maintaining it. It would not have been successful without them.


UI Bootstrap - AngularJS directives specific to Bootstrap

Gitter Build Status devDependency Status CDNJS

Quick links

Demo

Do you want to see directives in action? Visit https://angular-ui.github.io/bootstrap/!

Angular 2

Are you interested in Angular 2? We are on our way! Check out ng-bootstrap.

Installation

Installation is easy as UI Bootstrap has minimal dependencies - only the AngularJS and Twitter Bootstrap's CSS are required. Notes:

  • Since version 0.13.0, UI Bootstrap depends on ngAnimate for transitions and animations, such as the accordion, carousel, etc. Include ngAnimate in the module dependencies for your app in order to enable animation.
  • UI Bootstrap depends on ngTouch for swipe actions. Include ngTouch in the module dependencies for your app in order to enable swiping.

Angular Requirements

  • UI Bootstrap 1.0 and higher requires Angular 1.4.x or higher and it has been tested with Angular 1.4.8.
  • UI Bootstrap 0.14.3 is the last version that supports Angular 1.3.x.
  • UI Bootstrap 0.12.0 is the last version that supports Angular 1.2.x.

Bootstrap Requirements

  • UI Bootstrap requires Bootstrap CSS version 3.x or higher and it has been tested with Bootstrap CSS 3.3.6.
  • UI Bootstrap 0.8 is the last version that supports Bootstrap CSS 2.3.x.

Install with NPM

$ npm install angular-ui-bootstrap

This will install AngularJS and Bootstrap NPM packages.

Install with Bower

$ bower install angular-bootstrap

Note: do not install 'angular-ui-bootstrap'. A separate repository - bootstrap-bower - hosts the compiled javascript file and bower.json.

Install with NuGet

To install AngularJS UI Bootstrap, run the following command in the Package Manager Console

PM> Install-Package Angular.UI.Bootstrap

Custom build

Head over to https://angular-ui.github.io/bootstrap/ and hit the Custom build button to create your own custom UI Bootstrap build, just the way you like it.

Manual download

After downloading dependencies (or better yet, referencing them from your favorite CDN) you need to download build version of this project. All the files and their purposes are described here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files Don't worry, if you are not sure which file to take, opt for ui-bootstrap-tpls-[version].min.js.

Adding dependency to your project

When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the ui.bootstrap AngularJS module:

angular.module('myModule', ['ui.bootstrap']);

Webpack / JSPM

To use this project with webpack, follow the NPM instructions. Now, if you want to use only the accordion, you can do:

import accordion from 'angular-ui-bootstrap/src/accordion';

angular.module('myModule', [accordion]);

You can import all the pieces you need in the same way:

import accordion from 'angular-ui-bootstrap/src/accordion';
import datepicker from 'angular-ui-bootstrap/src/datepicker';

angular.module('myModule', [accordion, datepicker]);

This will load all the dependencies (if any) and also the templates (if any).

Be sure to have a loader able to process css files like css-loader.

If you would prefer not to load your css through your JavaScript file loader/bundler, you can choose to import the index-nocss.js file instead, which is available for the modules:

  • carousel
  • datepicker
  • datepickerPopup
  • dropdown
  • modal
  • popover
  • position
  • timepicker
  • tooltip
  • typeahead

The other modules, such as accordion in the example below, do not have CSS resources to load, so you should continue to import them as normal:

import accordion from 'angular-ui-bootstrap/src/accordion';
import typeahead from 'angular-ui-bootstrap/src/typeahead/index-nocss.js';

angular.module('myModule', [accordion, typeahead]);

Versioning

Pre-2.0.0 does not follow a particular versioning system. 2.0.0 and onwards follows semantic versioning. All release changes can be viewed on our changelog.

Support

FAQ

https://github.com/angular-ui/bootstrap/wiki/FAQ

Code of Conduct

Take a moment to read our Code of Conduct

PREFIX MIGRATION GUIDE

If you're updating your application to use prefixes, please check the migration guide.

Supported browsers

Directives from this repository are automatically tested with the following browsers:

  • Chrome (stable and canary channel)
  • Firefox
  • IE 9 and 10
  • Opera
  • Safari

Modern mobile browsers should work without problems.

Need help?

Need help using UI Bootstrap?

Please do not create new issues in this repository to ask questions about using UI Bootstrap

Found a bug?

Please take a look at CONTRIBUTING.md and submit your issue here.


Contributing to the project

We are always looking for the quality contributions! Please check the CONTRIBUTING.md for the contribution guidelines.

Development, meeting minutes, roadmap and more.

Head over to the Wiki for notes on development for UI Bootstrap, meeting minutes from the UI Bootstrap team, roadmap plans, project philosophy and more.

Comments
  • feat(popover): support template url for partial

    feat(popover): support template url for partial

    As requested in #202 by @joshdmiller here's my request for external partial support for popover which would make popover much more versatile and lower the need of duplicate code in the apps. Already working implementation can be found in one of the "competing" Bootstrap implementations at http://mgcrea.github.com/angular-strap/#/popover.

    type: enhancement component: popover 
    opened by mjp0 328
  • feat(popover): support templates

    feat(popover): support templates

    Update: This is ready to merge. ~~Here's a poll for anybody to get involved in voting to name this directive: http://goo.gl/forms/oxW1B4L81B~~ Thank you. It'll be called popover-template and tooltip-template.

    Update: I finally got to this. This should be ready for testing.

    TODO:

    • [x] Needs Tests
    • [x] Needs documentation
    • [x] Doesn't support live updating of the positioning after the template has been reloaded
    • [x] Doesn't support changing of the template URL (there's no watcher)

    This is a proof of concept to use a tooltipController to transclude a template.

    It's based off #1600 and most of the changes are from that. See https://github.com/chrisirhc/angular-ui-bootstrap/commit/0a1510c957bd385db61dcb1a8366fef97fd38e74 for actual changes for the popoverWindow. record

    Tests are missing but I wanted to open this up for discussion or comment.

    Fixes #220

    component: tooltip 
    opened by chrisirhc 110
  • refactor(): Support bootstrap 3.0

    refactor(): Support bootstrap 3.0

    Hi guys, thanks for your nice work. I would like to ask you when do you start support bootstrap 3.0. Some directives work some don't. E.g. modal doesn't work.

    I am developing new app but for me (IMHO for many other developers too) is better to start to build new project on BS3 WIP version because I hope it come sooner then I finish my app.

    I would like to propose create BS3 branch now and start to modify directives for it.

    What do you think about it?

    Bootstrap 3.0 
    opened by lichtner 105
  • Modal Dialog doesn't fade out

    Modal Dialog doesn't fade out

    Under certain circumstances, the modal dialog will simply disappear instead of fading out (even though it successfully fades in).

    The example in the documentation is what it should do (fade in and out). https://angular-ui.github.io/bootstrap/#/modal

    Ironically, the plunker link it generates shows the modal not properly fading out. I've saved my own to serve as an example here: http://plnkr.co/edit/lmFTpQtfgV6qB4AuFrXj?p=preview [Edit from @chrisirhc to reduce confusion: Please take note that the above Plunker does not include angular-animate. As such, no animations should be seen. This is a new requirement for animations, see README.]

    I have the same issue in a separate project of mine where I am handling the modal differently but have the same bug. I can provide the 2nd example if it would help but I imagine the plunker should be enough.

    The bug appears to be browser independent as it occurs both when I use Chrome v42.0.2311.135 m and in the developer edition of Firefox (39.0a2).

    UPDATE: Note that the plnkr is using the latest version of angular-ui (0.13.0) and the latest supported version of angular (1.3.13). This is not about angular 1.4.

    resolution: invalid component: modal AngularJS 1.3 type: ngAnimate AngularJS 1.4 
    opened by daniel-dara 96
  • Modal backdrop broken with bootstrap 3.3.1

    Modal backdrop broken with bootstrap 3.3.1

    IMPT Read bottom message, Bootstrap update has likely fixed this

    To be more precise, broken due to this commit: https://github.com/twbs/bootstrap/pull/14927/files

    Temporary workaround: override new css code with older one

    https://github.com/angular-ui/bootstrap#impt---2015-plans-and-angular-13-support

    component: modal Bootstrap 3.3.1 
    opened by LeleDev 82
  • feat(dialog): rewrite $dialog

    feat(dialog): rewrite $dialog

    I think that at this point it is cleat to everyone that the current $dialog service got in a state where it is hardy maintainable. There are tons of issues opened for it and some of the design decisions make it impossible to move forward with the current code.

    I'm in the process of re-writing the current service and the modal directive, will try to push the first version for review over the weekend (if everything goes as planned).

    Going to close all the existing issues for $dialog and 'modal' as a duplicate of this one.

    As a reminder, early draft of the design is available here: https://gist.github.com/ajoslin/5477996

    @ajoslin I'm not sure if keeping is as gist is the best thing at the moment as I can't easily modify it. Not sure how to progress - I can fork of course but how do we merge all the versions? Anyway I will be working on the forked gist for now.

    opened by pkozlowski-opensource 75
  • Proposition for typeahead : Open suggestion view on focus

    Proposition for typeahead : Open suggestion view on focus

    It could be interresting to automatically open the suggestion view when the input field has focus.

    It will allow user to see choices it can make when a filter is used and the list is not editable.

    What do you think about ?

    type: enhancement component: typeahead 
    opened by jdecool 74
  • $modal breaks forms b/c of transclusion

    $modal breaks forms b/c of transclusion

    Say I instantiate a modal:

    $modal.open({
      controller: 'MyCtrl'
    });
    

    In my modal, I have a form:

    <form name="myForm">...</form>
    

    Because of transclusion, myForm is not available on MyCtrl's scope and I can't check for $valid, for example. A workaround I've found is to simply put an ng-controller="MyCtrl" within my modal template itself, and do this:

    $modal.open({
      controller: function($scope, $modalInstance) {
        $scope.$modalInstance = $modalInstance;
      }
    });
    

    ...and now I can get to the instance from within MyCtrl.

    This is not ideal, but I'm not sure of what the fix should be. Instead of transclusion, would it be a good idea to actually insert an ngController directive within the template/modal/window.html template itself then say, ngTransclude within a child tag? Any better way to tackle this problem?

    thanks Chris

    component: modal 
    opened by boneskull 68
  • hide tooltips and popovers when a user clicks away

    hide tooltips and popovers when a user clicks away

    hide triggers when a click occurs that does not target the popover/tooltip link and does not target elements with the popover/tooltip classes

    This solves issue #1055 and helps with similar issues (#618, #590, #749, #751)

    Let me know if this is something that's desired and if an option needs to be added for toggling this behavior.

    component: tooltip component: popover 
    opened by SystemDisc 65
  • Positioning Angular UI bootstrap Datepicker

    Positioning Angular UI bootstrap Datepicker

    Hi. As I explained in my case in Stack Overflow (http://stackoverflow.com/questions/18716904/positioning-angular-ui-bootstrap-datepicker) I am having a problem with the positioning in the datepicker. It always appears below the input that invoke it from the bottom left corner. But if the input is close to the right border of the page, the datepicker is cut and a horizontal scroll appears.

    I am writing because I think it would be a nice feature to handle the alignment in the datepicker configuration.

    Hoping you take this into consideration

    Kind Regards Andrey Bottoni

    type: enhancement component: datepicker component: $position PRs plz! 
    opened by abottoni 64
  • `$modal.open` compatibility with component (`angular.component` method)

    `$modal.open` compatibility with component (`angular.component` method)

    Hello,

    I want to ask if you're considering support of angular.component method which is new API for creating components.

    I'd like to have the ability to call $modal.open method with the component definition. Now I have to specify controller and template options...

    My API proposal:

    angular.module('myApp').component('myModal', {
      bindings: {
        greeting: '<'
      },
      template: '<div>{{$ctrl.greeting}}</div>',
      controller: function () {},
    })
    
    // open the modal
    $modal.open({
      component: 'myModal',
      bindings: {
        greeting: 'hello',
      },
    });
    

    Thanks for response.

    O.

    type: enhancement component: modal 
    opened by zdychacek 62
  • [BUG] UIBS 2.5 UibModal doesn't close correctly

    [BUG] UIBS 2.5 UibModal doesn't close correctly

    Bug description:

    Hello, I got some trouble with uib modal, Sometimes, it's totally random, when I close modal using $uibModalInstance.close(smth) method, it doesn't close properly. I saw lot's of the same issue but can't find the same setup as mine. And as a said it's totally random, i can't reproduce it to make it work 100%.

    Link to minimally-working plunker that reproduces the issue:

    Here's a plunker reproducing my issue with older version, I don't want to use older version of angular or UIBS

    http://plnkr.co/edit/lQMQm5NJuRHkTBfER7cq?p=preview

    Steps to reproduce the issue:

    Here's my code: Call modal Method:

    var modalInstance = $uibModal.open({
                        animation: true,
                        controller: 'ModalInfoMouvementCtrl',
                        templateUrl: '/otawa/infomouvement',
                        size: 'lg',
                        backdrop: 'static',
                        keyboard: true,
                        resolve: {
                            param: function () {
                                return { mouvement: mvt };
                            }
                        }
                    });
                    modalInstance.result.then(function (mvt) {
                        if (mvt != null) {
                            var respa = mouvementSrv.getMouvementById(mvt.id);
                            respa.then(function (response) {
                                var mvt = convertMouvementData(response.data);
                                $scope.listMouvement[index] = mvt;
                                $scope.selectedmvt = null;
                            }, function (err, status) {
                                $toastr.error(err.data, 'Erreur');
                            });
                        }
                        reloadInstance();
                    }, function () {
                    });
    

    Closing method on other Controller :

      $scope.close = function (mvt) {
                    $uibModalInstance.close(mvt);
                }
    

    Calling modal on button click, then when i finish to fill my form inside the modal, it fade out but I can't click anywhere, and if I inspect HTML i can see the modal HTML. image

    Set animation false do not solve the bug.

    Any suggestion of what could be wrong ?

    Version of Angular, UIBS, and Bootstrap

    Angular: 1.5.6 Angular Animate : 1.5.6

    UIBS: 2.5.0

    Bootstrap: 3.3.7

    opened by Oowaay 2
  • Popover trigger=

    Popover trigger="outsideClick" not closes popover on mobile(IOS)

    Bug description:

    I'm using a uib-popover with outsideClick trigger. The popover outsideClick trigger works except on mobile(tested on iOS)

    Steps to reproduce the issue:

    Click link to open a popover Click in an outside area

    Popover should disappear and now its not.

    Version of Angular, UIBS, and Bootstrap

    Angular:1.5.11

    UIBS:2.5.0

    Bootstrap:3.3.7

    opened by rugarcialopez 1
  • fix(datepicker): initDate does not change

    fix(datepicker): initDate does not change

    Closes 6636

    change the datepicker activeDate so it uses a copy of the initDate instead of a reference to initDate. This way when the user clicks Next or Previous, activeDate changes but initDate does not.

    https://github.com/angular-ui/bootstrap/issues/6636

    opened by arcdev 0
  • [$compile:tpload] Failed to load template: uib/template/modal/window.html (HTTP status: 404 Not Found)

    [$compile:tpload] Failed to load template: uib/template/modal/window.html (HTTP status: 404 Not Found)

    Bug description:

    I've added ui-bootstrap to an angular 1.x project and getting this error when I want to open a modal form

    [$compile:tpload] Failed to load template: uib/template/modal/window.html (HTTP status: 404 Not Found)

    I've used ui-bootstrap before and always it worked well but in my new project I have problem with it.

    the code is like : $uibModal.open({ backdrop: 'static', templateUrl: 'DesktopModules/' + window.GLOB.moduleFolderName + '/app/form/form.html', controller: 'requestCtrl', size: 'sm', scope: $scope }); angular ver : v1.5.8

    UIBS: v2.2.0

    Bootstrap: v3.3.7

    opened by mahyar-pasarzangene 1
  • datepicker - initDate getting updated when navigating control

    datepicker - initDate getting updated when navigating control

    The issues forum is NOT for support requests. It is for bugs and feature requests only. Please read https://github.com/angular-ui/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: As the user navigates the datepicker control, the initDate is updated. This causes issues if you use the the current date of one datepicker as the initDate of another.

    Also, note how the Start Date control itself doesn't change, but the model value does.

    Expected: initDate is essentially readonly.

    Link to minimally-working plunker that reproduces the issue:

    https://plnkr.co/edit/tvelT5r6ho59zcPzPvIH?p=preview

    Steps to reproduce the issue:

    As noted in the Plunker, simply navigate forward or backward by month in the End Date datepicker and note how the Start Date value changes.

    Version of Angular, UIBS, and Bootstrap

    Angular: 1.6.1

    UIBS: 2.5.0

    Bootstrap: 3.3.7

    opened by arcdev 3
Releases(2.5.6)
Directives, utils, and events for working with angular zoneless

az-zoneless A set of directive and utilities to manage an angular zoneless app. Using this library you can go completly zoneless and still support 3rd

Yariv Katz 8 Dec 15, 2022
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
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 Dec 24, 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
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
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
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
🚀 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