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
3
votes
1 answer

AngularJS & Bootstrap modal Form. Why data is getting submitted on cancel

I face an issue with AngularJS and Bootstrap UI in a modal Form where on cancel the form is triggering the submission. Here is my Plunker to demonstrate my problem. On cancel I get an Alert inside submission which should not happen. What is wrong…
fefe
  • 8,755
  • 27
  • 104
  • 180
3
votes
1 answer

MEAN.JS and angular bootstrap carousel not working

I am getting started with MEAN.JS and am trying to implement the carousel example on the Angular Bootstrap examples page. I created a boilerplate project using the command yo meanjs and modified the home.client.view.html to remove the jumbotron and…
jamesamuir
  • 1,397
  • 3
  • 19
  • 41
3
votes
1 answer

Uncaught object at AngularJS + RequireJS + domReady

I had a working AngularJS application and started using RequireJS for module dependencies. Following this guide - http://www.startersquad.com/blog/angularjs-requirejs/ - with domReady plugin for manually bootstrapping angular app. Tested in Chrome…
Ilia Barahovsky
  • 10,158
  • 8
  • 41
  • 52
3
votes
2 answers

Passing Data to Twitter Bootstrap Modal in Angular

I want to show a modal box asking the user if they want to delete a post or not. I can't figure out how to pass the key which I pass in the key argument in which I also can alert. I took the code from the angular twitterbootstrap site but I can't…
Mohammad Abu Musa
  • 1,117
  • 2
  • 10
  • 32
2
votes
2 answers

Angular is not updating view with boolean variable in the rxjs pipe

I have an issue with the Angular 14 which is not updating the view when querying data. I want to show a loading spinner in my HTML when data are being loaded from the server. I am using ngbTypeahead for suggestions/hints. When I set the boolean…
2
votes
0 answers

Unable to convert "13/7/2021" into a date' for pipe DatePipe in Angular 11

In my angular form I have used Angular Bootstrap Datepicker control to select date. After selecting date from datepicker, the date format I get from the control is "dd-MM-yyyy". Now I would like to format the date to "yyyy-MMM-dd" format. So I have…
mnu-nasir
  • 1,642
  • 5
  • 30
  • 62
2
votes
3 answers

Change the Text of Modal calling Button when it is called from any other component in AngularJS

I have a component named Modal when I am working in Angular. I want to open the same Modal Component from two different places. But I want that the text of button mentioned in Banner in the given picture should be "Get Started Now" See the…
Nadeem Arif
  • 103
  • 9
2
votes
0 answers

Inject Angular service in constructor of app.module in Hybrid Angular app

I am looking at an Angular hybrid app and its new for me. Its app.module.ts has providers with upgraded AngularJS services under providers[..]: It has UpgradeModule injected as: constructor( private upgrade: UpgradeModule ) { } Then, there is…
2
votes
1 answer

What is the right way to override _variables in Bootstrap 4.3.1?

I am using Bootstrap 4.3.1 in my angular 8 project. Basically I want to (change / override) some default variables of bootstrap. Like e.g $font-size-base I've tried below code but this isn't working at all, please suggest me what is the right way to…
2
votes
1 answer

mdb angular datatable not working with pagination

I am trying to follow the tutorial here: https://mdbootstrap.com/docs/angular/tables/datatables/ But the issues is I get an error whenever I try to do anything with the pagination. Cannot read property 'setMaxVisibleItemsNumberTo' of undefined My…
r3plica
  • 13,017
  • 23
  • 128
  • 290
2
votes
1 answer

Is this a bug with the Angular Bootstrap date picker?

If I have an Angular bootstrap date picker with a format of "DD/MM/YYYY" and hide it with an ngIf it defaults back to a format of "MM/DD/YYYY" when it is shown again.
Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
2
votes
1 answer

Angular - Dynamic ngDropdown not expanding when clicked

I have component that has N amount of filters, and for each of those filters, there are M amount of values. I am trying to dynamically display both of these, but it doesn't seem to be working. I was able to test the values and see if I was using…
Cjolsen06
  • 89
  • 1
  • 2
  • 6
2
votes
1 answer

how to set initial value or default value in date field?

I am trying to implement a date picker in angularjs and bootstrap but I am facing a few issues: initial date is not set when I am trying to open one date picker why does it open all the date pickers? Here is my…
user10288182
2
votes
0 answers

Adding a bootstrap popover with an Angular directive

I'm trying to add a bootstrap to an element using an Angular directive: import { Directive, ElementRef, Input, OnInit, Renderer } from '@angular/core'; @Directive( { selector: '[myPopup]' } ) export class MyPopupDirective implements OnInit { …
Sparafusile
  • 4,696
  • 7
  • 34
  • 57
2
votes
3 answers

Possibly unhandled rejection when try to dismiss a modal

I have a cancel button on my modal and has an on-click function that calls: onCancelClick: function () { $uibModalInstance.dismiss() } its work but make this error: Possibly unhandled rejection: undefined or when click on esc key:…
Alireza
  • 23
  • 2
  • 6