Questions tagged [angular-bootstrap]

Bootstrap helpers module for AngularJs framework

Bootstrap components written in pure AngularJS by the AngularUI Team

Dependencies

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

  • AngularJS (requires AngularJS 1.2.x, tested with 1.2.16)
  • Bootstrap CSS (tested with version 3.1.1). This version of the library (0.11.2) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.

Files to download

Build files for all directives are distributed in several flavours: minified for production usage, un-minified for development, with or without templates. All the options are described and can be downloaded from here.

Alternativelly, if you are only interested in a subset of directives, you can create your own build.

Whichever method you choose the good news that the overall size of a download is very small: <20kB for all directives (~5kB with gzip compression!)

Installation

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ui.bootstrap module: angular.module('myModule', ['ui.bootstrap']); You can fork one of the plunkers from this page to see a working example of what is described here.

CSS

Original Bootstrap's CSS depends on empty href attributes to style cursors for several components (pagination, tabs etc.). But in AngularJS adding empty href attributes to link tags will cause unwanted route changes. This is why we need to remove empty href attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application:

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

Homepage : http://angular-ui.github.io/bootstrap/

580 questions
5
votes
3 answers

How to add a button in accordion header in bootstrap 3.0/bootstrap-ui?

I am trying to add a button to the accordion that has a dropdown menu but it doesn't seem to be working a: 1) button is too big so it goes past the accordions header. 2) The dropdown menu ends up inside the accordion header/group and not on top of…
4
votes
3 answers

How to add bootstrap in an Angular library

My versions are: 1. npm v6.14.12 2. node v10.24.1 3. angular-cli v8.0.2 I created a library with these commands: Step 1: ng new my-workspace --create-application=false Step 2: cd my-workspace then ng generate library my-lib Step 3: cd…
Tanzeel
  • 4,174
  • 13
  • 57
  • 110
4
votes
1 answer

How to have multiple card items in Angular Bootstrap Carousel?

I am using this carousel. I want something like the multiple-item carousel here. I tried following this tutorial but it ends up breaking my website and causes many errors. What I have tried:
Mr. Disability
  • 799
  • 1
  • 10
  • 19
4
votes
1 answer

ngbTabset not updating tab programmatically

I'm trying to activate tab programmatically(not default active) through ngbTabset.select() but it's not working.
Omprakash Sharma
  • 409
  • 5
  • 11
4
votes
1 answer

Angular 6: ExpressionChangedAfterItHasBeenCheckedError triggered from select drop-down event

What code changes can remedy the Error described below ? Use-case A drop-down input UI is protected from unintended selected value change via a modal. However, the event (click, focus or other), wired to the drop-down causes the…
zaggi
  • 870
  • 1
  • 7
  • 24
4
votes
2 answers

Is it possible to change angular bootstrap uib-dropdown templateUrl dynamically?

I want to change the uib-dropdown template dynamically when the user clicks one of its
  • , just like he could "navigate" within that dropdown. I tried to make it via templateUrl, but nor the ng-templates nor standalone partials can successfully…
  • 4
    votes
    1 answer

    Angular 2 build error - '../@angular/platform-browser-dynamic' no exported member 'bootstrap'

    I'm getting an error where TypeScript is not recognizing the exported 'bootstrap' function from platform-browser-dynamic. ERROR in [default] ../retain-app/src/main.ts:1:9 Module '"../retain-app/node_modules/@angular/platform-browser-dynamic/index"'…
    4
    votes
    2 answers

    How to replace deprecated uib-datepicker-popup?

    Since I updated my project to "angular-bootstrap": "~1.2.4", I've a warning in the console: uib-datepicker settings via uib-datepicker-popup attributes are deprecated and will be removed in UI Bootstrap 1.3, use datepicker-options attribute…
    mickro
    • 881
    • 2
    • 11
    • 26
    4
    votes
    1 answer

    angular-bootstrap add new directive dosn't work

    I want to create a new directive into ui.boostrap.accordion module to avoid accordion open click event. I have the following code in another file.js: angular.module('ui.bootstrap.accordion') .directive('accordionGroupLazyOpen', function() { return…
    Serginho
    • 7,291
    • 2
    • 27
    • 52
    4
    votes
    2 answers

    AngularJS modal not displayed when using partial for templateURL

    I have a modal in a partial file that is loaded into my main view with an ng-include tag, but the template isn't found. I don't see the template being loaded in console or the console network tab. I get the following message: Error:…
    4
    votes
    1 answer

    Popover on data toggle not rendered in a different version of bootstrap

    I have used a bootstrap pop over in ng-repeat. Below code snippet for the same
    {{…
    KeenUser
    • 5,305
    • 14
    • 41
    • 62
    4
    votes
    2 answers

    Display scroll in modal

    I have app using angular-bootstrap and also ionicFramework. Problem is in angular-bootstrap $modal element. I want it has vertical scrollbar, but in ionic.css there are style: ::-webkit-scrollbar { display: none; } and because of this there is no…
    Olga Akhmetova
    • 490
    • 1
    • 6
    • 19
    3
    votes
    1 answer

    NgbDatepicker in Reactive Forms: Set Initial Value

    This might be one of the more frustrating issues I've coped with in a while. Dates and -- in particular -- NgbDatepicker are a bit of a bear to deal with in Angular, in general. I'm implementing NgbDatepicker against reactive forms in Angular 8, and…
    3
    votes
    1 answer

    How to use less in Angular component without CLI

    I've got an application where I have to configure and use less for dynamic theme implementation. The issue is we are not using angular-cli and configuration is bit weird here, so we are manually bootstrapping angular modules. Following is the…
    J.K.A.
    • 7,272
    • 25
    • 94
    • 163
    3
    votes
    1 answer

    Custom trigger for angular multi-select

    Is there an angular 2+ multi-select dropdown that has a custom trigger button? I'm looking for something similar to the old AngularJS "custom trigger element using transclusion" (here)...however, ng-select, ng-multiselect-dropdown and other do not…
    user749798
    • 5,210
    • 10
    • 51
    • 85