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
2
votes
3 answers

I'm getting an error while importing the "ngx-bootstrap/datepicker" module in Angular 6

I am trying to import the ngx Bootstrap datepicker in my Angular Application for that I followed the following stapes to npm install ngx-bootstrap npm install ngx-bootstrap --save Installed bootstrap 3 npm install bootstrap@3 --save In…
2
votes
3 answers

I am getting error while Running Angular application

I have installed ngx Bootstrap into my Angular Application to use date picker Now I am getting error while running the Angular Application I am putting the details of the error below ERROR in multi…
2
votes
0 answers

Don't plot graph on null value on ngx-charts-line-chart

I, am using ngx-charts-line-chart to plot the graph. Getting an error on Null value and the graph is ploted as 0 on the null value.
San Jaisy
  • 15,327
  • 34
  • 171
  • 290
2
votes
1 answer

Angular bootstrap datetime picker

Though there are various good datetime pickers available, I'm looking for a single component which has all these following features - Date and time selection in one go Only date selection Only time selection Multiple dates selection (Not to be…
balajiprasadb
  • 365
  • 1
  • 5
  • 17
2
votes
1 answer

NgbDropdown click event not working

I know I am missing something small but have to ask because this just isnt working. The click event for the button is not firing. I have started with the documentation and then moved here copied this in to one of my pages. When I add in the…
Troy Bryant
  • 994
  • 8
  • 29
  • 60
2
votes
1 answer
2
votes
1 answer

Is it possible to run one Angular 2 app several times in one page?

I'm making migration from asp.net web forms to Angular 4. I'm making it step by step. Replacing one part and placing it in production. I face a problem with loading same Angular app several times in page. For example with code
IAfanasov
  • 4,775
  • 3
  • 27
  • 42
2
votes
0 answers

Why AngularJs 2 supports bootstrapping only through code

In AngularJs 1 there were two ways of bootstrapping your module. Automatic by ng-app Manual bootstrap by code But now when I started exploring Angular 2 I can find only one way of bootstraping it (through code).When I investigated more I found…
Rishi Tiwari
  • 1,041
  • 1
  • 10
  • 20
2
votes
1 answer

Angular UI Bootstrap Pagination in ng-if

I've got a pagination component wrapped in an ng-if directive. You can see the currentPage updating in the view binding. The controller logs the currentPage each time it's changed, but it doesn't seem to update within the scope of the controller. Is…
urnotmydad
  • 71
  • 5
2
votes
0 answers

Modal view inside ui-view not working

I amm trying to implement a modal window inside a ui-view. All was working fine when the modal template and controller were inside the ui-view, but after separating them in separate folder they don't work. Now I am confused on how to link the modal…
Jamie
  • 347
  • 3
  • 19
2
votes
1 answer

Bootstrap not working with Angular 2

Good evening. I just started with the Angular 2 course offered on udemy and everything was going great, until I had to install bootstrap on it. I went step by step with the installation but for some reason when I try to add any bootstrap tags, the…
D.C
  • 23
  • 1
  • 3
2
votes
1 answer

How to prevent page scroll to top when using Angular-bootstrap modal and window position:fixed workaround for ipad?

You may know, that there is a bug in bootstrap modals on some devices, that the page behind the modals scrolls instead of the modal (http://getbootstrap.com/getting-started/#support-fixed-position-keyboards) This bug can be easily fixed by adding a…
Stalinko
  • 3,319
  • 28
  • 31
2
votes
2 answers

Angular Bootstrap Calender Drag Event not working

I am facing problem in drag event of Angular bootstrap calender. I am using https://mattlewis92.github.io/angular-bootstrap-calendar/#?example=draggable-events Here is my HTML code:
Anjaney Mishra
  • 141
  • 1
  • 2
  • 13
2
votes
1 answer

angular-bootstrap progressbar progress shown is incorrect

I am running a serie of simulations on an external window, and each time a simulation is done I increment a progress value on the main window (everything happens through IPC communication). The whole mechanics works beautifully, and the view above…
2
votes
2 answers

Unknown provider: $animateCssProvider <- $animateCss <- $uibModalStack <- $uibModal

If I update my angular version to higher version I am sure it will work, but I am more depended on 1.3.20 version of angular. I tried angular-bootstrap version from 1.1 to the latest, nothing works with the 1.3.20. All I get is unknown…
Garfield
  • 2,487
  • 4
  • 31
  • 54