valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)

ngx-bootstrap

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

Note: ngx-bootstrap for Bootstrap 3 is still available but is no longer maintained or updated. development

Links

• Documentation
• Release Notes
• Slack Community

Table of contents

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

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 backing 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 for use of these funds.

What's in it 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

You can see the below simple example working on StackBlitz

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:

<button type="button" class="btn btn-primary"
        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Simple demo
</button>

You will need to add bootstrap css: This can be done with the css file directly in the index.html, or alternatively through a styles import in the angular.json file or via styles.scss import. However the latter two options require additionally installing bootstrap via npm.

• Bootstrap 5

<!--- index.html -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

• Bootstrap 4

<!--- index.html -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2">

Setting up the bootstrap version manually

As you may know ngx-bootstrap supports 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('bs5'); // 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 version compatibility list:

ngx-bootstrap	Angular	Bootstrap CSS
12.x.x	17.x.x	5.x.x or 4.x.x
11.x.x	16.x.x	5.x.x or 4.x.x
10.x.x	15.x.x	5.x.x or 4.x.x
9.0.0	14.x.x	5.x.x or 4.x.x or 3.x.x
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) where there is a strong community of individuals asking and answering questions.

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 none of the above helped, please feel free to 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

License

MIT

Valor Software Can Help

At Valor Software our people are not resources, our people are human beings, helping to create a better world through our efforts and knowledge. We are here to assist you with your project. We have a wonderful, ever-growing team that is ready and able. If you're looking for someone to guide you and your team please feel free to reach out to us on our site or at [email protected], we would love to chat.

ngx-bootstrap's Issues

bug(dropdown): two consecutive dropdown clicks

if you click to open one dropdown, then click on another dropdown, the menu no longer disappears when you click away.

parse error when importing Timepicker (ng2+webpack+ts)

Hi,
This seems pretty basic, but I have created a simple component that references the Timepicker directive from ng2-bootstrap.

...
import {Timepicker} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'project-datetime', 
  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, ROUTER_DIRECTIVES, Timepicker],
  styles: [ . . . ],
  template: . . . 
})
export class ProjectDateTime { 
  tpconfig: any;
  constructor() {
    this.tpconfig = {
      hstep: 1, mstep: 1, ismeridian: false
    };
  }
}
. . .

And the relevant fragment from the template for the component:

. . . 
    <div class="form-group">
      <label for="" class="control-label col-sm-3">Time</label>
      <div class="col-sm-6">
        <timepicker [(ng-model)]="datetime.time" [hour-step]="tpconfig.hstep" [minute-step]="tpconfig.mstep" [show-meridian]="tpconfig.ismeridian"></timepicker>
      </div>
    </div>
. . .

When my component attempts to import Timepicker from ng2-bootstrap, I get a module parse error. I installed ng2-bootstrap as directed: npm install --save ng2-bootstrap. My project is based on the angular2+webpack+typescript starter. I am running under angular2 alpha46. Typescript version is 1.6.2. I assume the same error would be given trying to load any other directive from ng2-bootstrap. Any idea why this is failing?

ERROR in ./~/ng2-bootstrap/ng2-bootstrap.ts
Module parse failed: /home/loren/Source/c4/c4-project-config/node_modules/ng2-bootstrap/ng2-bootstrap.ts Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| export * from './components/accordion/accordion';
| export * from './components/alert/alert';
| export * from './components/buttons/button-radio';
@ ./src/app/components/project/datetime/datetime.ts 15:22-60

chore(pagination): pageChanged emitted 3 times on init

I'm using Your pagination component and I can see that pageCahnged is emitted 3 times on component init - why?

Integration with ng2 seeds

@jimthedev @valorkin
I could able to solve the integration of ng-bootstrap2 alert box in angular-seed app,
https://github.com/AngularShowcase/github-api-sample-app
works with .js files, so needed to convert all .ts files to .js .
And in the process:

I was getting some issue like:
EXCEPTION: Cannot resolve all parameters for Alert(?). Make sure they all have valid type or annotations.

So I was forced to add some code in your component alert.ts file

• import {... Inject, Injectable,... } from 'angular2/angular2';
• @Injectable()
• constructor(@Inject(ElementRef) public el:ElementRef) {
  this.closeable = this.closeable || el.nativeElement.getAttribute('(close)');
  }

And then the things starts working,

• But ideally this should have not happened,
• Please let me know if you have any alternative solution

---

Likewise there are remaining components, which is not allowing to merge with angular-seed or with ES5
NOTE: I am not sure, it is the problem of ng2-bootstrap or the angular2-seed application configuration, just brt to your notice

feat(tooltip): add support for embedded html

Hi, I'm unable to see the embedded html in your tooltip demo for bootstrap 3.

typeahead.ts line 49 should be [innerHtml]

For [email protected], [inner-html] should be changed to [innerHtml].

Many thanks for your efforts.

Bug in Tabs 2-way binding ?

When I try to close the tab by splicing the tabs array, tabset doesn't update. i.e a tab doesn't get destroyed.
However, adding a new item to the tabs array updates the tabs in the tabset. Is there a bug ?

about problem with use

hi,i use ng2-bootstrap directives,version 1.0.0-beta2,but i find in console have two error ,
Uncaught SyntaxError: Unexpected token < and Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/ng-bootstrap2/ng-bootstrap2
Error loading http://localhost:3000/app/boot.js,i don't kown where error,what should i do???

ng2-bootstrap with angular-cli (Uncaught ReferenceError: webpackJsonp is not defined)

Hi,

just starting playing with angular 2.

I use angular-cli (https://github.com/angular/angular-cli) and everything works.

But when I try to load this module (ng2-bootstrap) it fails:

1. I inlcude <script src="node_modules/ng2-bootstrap/build/angular2-bootstrap.js"></script>
2. and after refresh I see angular2-bootstrap.js:1Uncaught ReferenceError: webpackJsonp is not defined

I think this module "compiled" to be used with webpack or something (I didn't use it before).

Do I need:
a) somehow include webpack module
b) re-compile ng2-bootstrap without webpack
?

If I should recompile, please advise how to do that. Thank you!

Upgrade: to ng2 alfa 36

combine bootstraps?

@Mlaval has a Carousel and @SebastianM also made a progressbar

how can we combine all efforts? Or is it a race to the first one who finishes the conversion

Adjust to alpha.46

After upgrading to Angular 2.0.0-alpha.46 we get the following errors in each place where EventEmitter is used:

ERROR in ./~/ng2-bootstrap/components/typeahead/typeahead.ts
(185,27): error TS2314: Generic type 'EventEmitter<T>' requires 1 type argument(s).

ERROR in ./~/ng2-bootstrap/components/typeahead/typeahead.ts
(186,29): error TS2314: Generic type 'EventEmitter<T>' requires 1 type argument(s).

ERROR in ./~/ng2-bootstrap/components/typeahead/typeahead.ts
(187,28): error TS2314: Generic type 'EventEmitter<T>' requires 1 type argument(s).

ERROR in ./~/ng2-bootstrap/components/tabs/tabs.ts
(92,17): error TS2314: Generic type 'EventEmitter<T>' requires 1 type argument(s).

ERROR in ./~/ng2-bootstrap/components/tabs/tabs.ts
(93,19): error TS2314: Generic type 'EventEmitter<T>' requires 1 type argument(s).

ERROR in ./~/ng2-bootstrap/components/rating/rating.ts
(43,19): error TS2314: Generic type 'EventEmitter<T>' requires 1 type argument(s).

ERROR in ./~/ng2-bootstrap/components/rating/rating.ts
(44,19): error TS2314: Generic type 'EventEmitter<T>' requires 1 type argument(s).

ERROR in ./~/ng2-bootstrap/components/pagination/pagination.ts
(106,20): error TS2314: Generic type 'EventEmitter<T>' requires 1 type argument(s).

ERROR in ./~/ng2-bootstrap/components/pagination/pagination.ts
(107,23): error TS2314: Generic type 'EventEmitter<T>' requires 1 type argument(s).

ERROR in ./~/ng2-bootstrap/components/dropdown/dropdown.ts
(22,20): error TS2314: Generic type 'EventEmitter<T>' requires 1 type argument(s).

ERROR in ./~/ng2-bootstrap/components/alert/alert.ts
(28,16): error TS2314: Generic type 'EventEmitter<T>' requires 1 type argument(s).

I'll send a PR later on.

ngModel and btnRadio

When using btnRadio with ngModel on current angular 2.0 beta-0 I get the following error.

Error: No value accessor for '' in [option.value in FePlanListFilter@6:12]

The relevant code copies the example on the demo site.

import {Component, View, Input} from 'angular2/core';

import template from './filter-buttons.html';
import './filter-buttons.less';

@Component({
    selector: 'filter-buttons'
})
@View({
    template
})
export default class FilterButtons {
    @Input() title;
    @Input() options;

    constructor() {
        this.currentFilter = '';
    }

    filterChanged(value) {
        this.currentFilter = value;
        // example usage, other things will happen here...
    }
}

<div class="filter-buttons">
    <h6 class="filter-buttons__title">Filter by {{ title }}</h6>
    <div class="btn-group">
        <label
            *ngFor="#option of options"
            class="btn btn-default"
            [ngModel]="option.value"
            (ngModel)="filterChanged(option.value)"
            btnRadio
            uncheckable>{{ option.display }}</label>
    </div>
</div>

If I add ngDefaultAccessor to thethen the error goes away but the buttons do not toggle or fire thengModel` event. WTF is happening here?

fix(typeahead): not working for async with complex objects

I've looked into the example for the typeahead component but it is not working if I want to use the statesComplex array instead of the states array, in the async case. Could you provide an example for this case also?

chore(demo): fix prism.js parsing of null safe rendering {{obj?.prop}}

The information here shows this as a working alert:

import {Component} from 'angular2/core'
import {CORE_DIRECTIVES} from 'angular2/common'
import {Alert} from 'ng2-bootstrap'

@Component({
    selector: 'alert-demo',
    directives: [Alert, CORE_DIRECTIVES],
    template: `
    <alert *ngFor="#alert of alerts;#i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">{{alert.msg}}</alert>
    <alert dismissOnTimeout="3000">
        This alert will dismiss in 3s
    </alert>
    <button type="button" class='btn btn-primary' (click)="addAlert()">
        Add Alert
    </button>`
})
export class AlertDemo {
    alerts: Array<Object> = [
        {
            type: 'danger',
            msg: 'Oh snap! Change a few things up and try submitting again.'
        },
        {
            type: 'success',
            msg: 'Well done! You successfully read this important alert message.',
            closable: true
        }
    ]

    closeAlert(i: number) {
        this.alerts.splice(i, 1)
    }

    addAlert() {
        this.alerts.push({msg: 'Another alert!', type: 'warning'})
    }
}

Changing the template to

`<alert *ngFor="#alert of alerts;#i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
    {{alert.msg}}
</alert>
    <alert dismissOnTimeout="3000">
        This alert will dismiss in 3s
    </alert>
    <button type="button" class='btn btn-primary' (click)="addAlert()">
        Add Alert
    </button>`

with the {{alert.msg}} explicitly fixed this issue for me.

Generated html (chrome), before:

<div class="alert alert-danger alert-dismissible" role="alert">
    <!--template bindings={}--><button class="close" type="button">
      <span aria-hidden="true">×</span>
      <span class="sr-only">Close</span>
    </button>
  </div>

after

<div class="alert alert-danger alert-dismissible" role="alert">
    <!--template bindings={}--><button class="close" type="button">
      <span aria-hidden="true">×</span>
      <span class="sr-only">Close</span>
    </button>
    Oh snap! Change a few things up and try submitting again.
  </div>

npm ls output:

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ └── [email protected]
├── [email protected]
└── [email protected]

fix(datepicker): for ng2 beta

I found DatePicker in the Directives menu, but nothing in detail.
Do you have any plan to add it, or go further, add the DateTimePicker?

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

chore(build): add systemjs bundles

Would be very nice to have a dist folder with a bundled file build with systemjs (register).

the main file in package.json is ng2-boostrap instead of ng2-bootstrap

the main file in package.json is ng2-boostrap.js instead of ng2-bootstrap.js causing import "node" style to not work and hard-to-debug 404 errors.

ReferenceError: webpackJsonp is not defined (when using live-server not webpack-dev-server)

I started an app as recommended in https://angular.io/docs/ts/latest/quickstart.html (with the 'npm init -y' and package.json and everything). I am therefore not using webpack-dev-server, but live-server.

Then I did "npm install --save ng2-bootstrap".

I added to my index.html: (script src="../node_modules/ng2-bootstrap/build/angular2-bootstrap.js")
I get "ReferenceError: webpackJsonp is not defined".

Cannot resolve all parameters for Alert(?). Make sure they all have valid type or annotations.

Exeption: Cannot resolve all parameters for Alert(?). Make sure they all have valid type or annotations.

solved: --emitDecoratorMetadata added to tsc compiler

Error when importing it using webpack

Hi,

I use the "webpack.config.js" from your "angular2-bootstrap-starter" project, but when I try to import the dropdown in one of my component like this:

import {Dropdown} from "ng2-bootstrap/ng2-bootstrap";

I get the following error:

Error: Could not find file: 'c:/MyProject/node_modules/ng2-bootstrap/ng2-bootstrap.d.ts'.
    at getValidSourceFile (c:\MyProject\node_modules\typescript\lib\typescript.js:43586:23)
    at Object.getSyntacticDiagnostics (c:\MyProject\node_modules\typescript\lib\typescript.js:43756:52)
    at c:\MyProject\node_modules\ts-loader\index.js:317:42
    at Array.forEach (native)
    ...

Of course I triple checked and the file exists.

Have you already experienced something like this ?
Any clue ?

Best
Daniel

Exception when using tabs

Hi,
I am trying to use the tabs. When I load the page with the tabs I get:

EXCEPTION: Expression 'classMap in Tabset@1:20' has changed after it was checked. Previous value: '[object Object]'. Current value: '[object Object]' in [classMap in Tabset@1:20]BrowserDomAdapter.logError @ angular2.dev.js:23514BrowserDomAdapter.logGroup @ angular2.dev.js:23525ExceptionHandler.call @ angular2.dev.js:1145(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700r.run @ angular2-polyfills.min.js:1(anonymous function) @ angular2.dev.js:5719NgZone.run @ angular2.dev.js:5681(anonymous function) @ angular2.dev.js:14884schedulerFn @ angular2.dev.js:14385t @ tryOrOnError.js:4t.next @ Subscriber.js:112t._next @ Subject.js:111t.next @ Subject.js:74EventEmitter.emit @ angular2.dev.js:14366(anonymous function) @ angular2.dev.js:5612r.run @ angular2-polyfills.min.js:1NgZone._notifyOnTurnDone @ angular2.dev.js:5611(anonymous function) @ angular2.dev.js:5726NgZone.run @ angular2.dev.js:5681(anonymous function) @ angular2.dev.js:14884schedulerFn @ angular2.dev.js:14385t @ tryOrOnError.js:4t.next @ Subscriber.js:112t._next @ Subject.js:111t.next @ Subject.js:74EventEmitter.emit @ angular2.dev.js:14366(anonymous function) @ angular2.dev.js:5612r.run @ angular2-polyfills.min.js:1NgZone._notifyOnTurnDone @ angular2.dev.js:5611(anonymous function) @ angular2.dev.js:5726(anonymous function) @ angular2-polyfills.min.js:1
angular2.dev.js:23514 ORIGINAL EXCEPTION: Expression 'classMap in Tabset@1:20' has changed after it was checked. Previous value: '[object Object]'. Current value: '[object Object]'BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1154(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700r.run @ angular2-polyfills.min.js:1(anonymous function) @ angular2.dev.js:5719NgZone.run @ angular2.dev.js:5681(anonymous function) @ angular2.dev.js:14884schedulerFn @ angular2.dev.js:14385t @ tryOrOnError.js:4t.next @ Subscriber.js:112t._next @ Subject.js:111t.next @ Subject.js:74EventEmitter.emit @ angular2.dev.js:14366(anonymous function) @ angular2.dev.js:5612r.run @ angular2-polyfills.min.js:1NgZone._notifyOnTurnDone @ angular2.dev.js:5611(anonymous function) @ angular2.dev.js:5726NgZone.run @ angular2.dev.js:5681(anonymous function) @ angular2.dev.js:14884schedulerFn @ angular2.dev.js:14385t @ tryOrOnError.js:4t.next @ Subscriber.js:112t._next @ Subject.js:111t.next @ Subject.js:74EventEmitter.emit @ angular2.dev.js:14366(anonymous function) @ angular2.dev.js:5612r.run @ angular2-polyfills.min.js:1NgZone._notifyOnTurnDone @ angular2.dev.js:5611(anonymous function) @ angular2.dev.js:5726(anonymous function) @ angular2-polyfills.min.js:1
angular2.dev.js:23514 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1157(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700r.run @ angular2-polyfills.min.js:1(anonymous function) @ angular2.dev.js:5719NgZone.run @ angular2.dev.js:5681(anonymous function) @ angular2.dev.js:14884schedulerFn @ angular2.dev.js:14385t @ tryOrOnError.js:4t.next @ Subscriber.js:112t._next @ Subject.js:111t.next @ Subject.js:74EventEmitter.emit @ angular2.dev.js:14366(anonymous function) @ angular2.dev.js:5612r.run @ angular2-polyfills.min.js:1NgZone._notifyOnTurnDone @ angular2.dev.js:5611(anonymous function) @ angular2.dev.js:5726NgZone.run @ angular2.dev.js:5681(anonymous function) @ angular2.dev.js:14884schedulerFn @ angular2.dev.js:14385t @ tryOrOnError.js:4t.next @ Subscriber.js:112t._next @ Subject.js:111t.next @ Subject.js:74EventEmitter.emit @ angular2.dev.js:14366(anonymous function) @ angular2.dev.js:5612r.run @ angular2-polyfills.min.js:1NgZone._notifyOnTurnDone @ angular2.dev.js:5611(anonymous function) @ angular2.dev.js:5726(anonymous function) @ angular2-polyfills.min.js:1
angular2.dev.js:23514 Error: Expression 'classMap in Tabset@1:20' has changed after it was checked. Previous value: '[object Object]'. Current value: '[object Object]'
    at ExpressionChangedAfterItHasBeenCheckedException.BaseException [as constructor] (http://127.0.0.1:8001/node_modules/angular2/bundles/angular2.dev.js:8080:21)
    at new ExpressionChangedAfterItHasBeenCheckedException (http://127.0.0.1:8001/node_modules/angular2/bundles/angular2.dev.js:4653:14)
    at AbstractChangeDetector.throwOnChangeError (http://127.0.0.1:8001/node_modules/angular2/bundles/angular2.dev.js:8982:13)
    at AbstractChangeDetector.ChangeDetector_Tabset_0.detectChangesInRecordsInternal (eval at <anonymous> (http://127.0.0.1:8001/node_modules/angular2/bundles/angular2.dev.js:10897:14), <anonymous>:30:16)
    at AbstractChangeDetector.detectChangesInRecords (http://127.0.0.1:8001/node_modules/angular2/bundles/angular2.dev.js:8824:14)
    at AbstractChangeDetector.runDetectChanges (http://127.0.0.1:8001/node_modules/angular2/bundles/angular2.dev.js:8807:12)
    at AbstractChangeDetector._detectChangesInViewChildren (http://127.0.0.1:8001/node_modules/angular2/bundles/angular2.dev.js:8877:14)
    at AbstractChangeDetector.runDetectChanges (http://127.0.0.1:8001/node_modules/angular2/bundles/angular2.dev.js:8811:12)
    at AbstractChangeDetector._detectChangesContentChildren (http://127.0.0.1:8001/node_modules/angular2/bundles/angular2.dev.js:8871:14)
    at AbstractChangeDetector.runDetectChanges (http://127.0.0.1:8001/node_modules/angular2/bundles/angular2.dev.js:8808:12)

Do you have any idea what is causing the problem?

chore(build): tsc module system systemsjs vs commonjs

In Angular docs 5 Min Quickstart and Appendix: TypeScript configuration they teach using module: "system" for tsc:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

This issue is just to evaluate if it would be a better option to transpile ng2-bootstrap with system as well (don't know the implications given that ng2-bootstrap uses webpackBootstrap and I don't really know how it works). I suppose that the reason to use system is the detection order, from Systemjs:

The module format detection happens in the following order:

• System.register / System.registerDynamic If the source code starts with a number of comments, followed by System.register or System.registerDynamic as the first line of code.
• ES modules The source is only detected as an ES module if it contains explicit module syntax - valid import or export statements.
• AMD modules The presence of a valid AMD define statement in the code.
• CommonJS modules The presence of require(...) or exports / module.exports assigments
• Global This is the fallback module format after all the above fail.

The problem would be to a new angular2 developer strictly following the 5 Min Quickstart: in the systemjs config they teach using format: "register" option.

chore(pagination): template parse errors in IE10

EXCEPTION: Template parse errors:
Can't bind to 'hidden' since it isn't a known native property ("ation-first"
        [ngClass]="{disabled: noPrevious()||disabled, hidden: !boundaryLinks}"
        [ERROR ->][hidden]="!boundaryLinks">
      <a href (click)="selectPage(1, $event)">{{getText('first')}}</a>
   "): function Pagination(cd, renderer, elementRef) {@4:8
Can't bind to 'hidden' since it isn't a known native property ("ation-prev"
        [ngClass]="{disabled: noPrevious()||disabled, hidden: !directionLinks}"
        [ERROR ->][hidden]="!directionLinks">
      <a href (click)="selectPage(page - 1, $event)">{{getText('previous'): function Pagination(cd, renderer, elementRef) {@10:8
Can't bind to 'hidden' since it isn't a known native property ("agination-next"
        [ngClass]="{disabled: noNext()||disabled, hidden: !directionLinks}"
        [ERROR ->][hidden]="!directionLinks">
      <a href (click)="selectPage(page + 1, $event)">{{getText('next')}}<"): function Pagination(cd, renderer, elementRef) {@

Recommendation is to use ngIf or css to show/hide elements:
angular/angular#5774

Bug in docs (accordion)

There's a little bug in the accordion example in docs I think, it says

<accordion-group *ngFor="#group of groups" [heading]="group.title">

</accordion-group>

should be:

<accordion-group *ngFor="#group of groups" [heading]="group.title">
   {{group.content}}
</accordion-group>

issue(tabs): tab header not preventing default

fixed, close this when PR merged

chore(template-url): support or not

How hard would it be to support template-url on AccordionGroup? I need it for a project I am working on, the existing template is somewhat complex and is including a lot of unwanted CSS.

I'd be happy to have a go at a PR, just don't know what to do here. Thanks!

fix(pagination): Unable to use Pagination

I can't get Pagination to work with the following. Please forgive my lack of Angular 2 understanding.

import {Component, Injectable} from 'angular2/core';
import {Http, Headers} from 'angular2/http';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

import {PostService} from '../services/posts/postsService';
import {Post} from '../datatypes/post/post';

@Component({
       selector: 'posts',
       template: require('./posts.html'),
       directives: [PAGINATION_DIRECTIVES],
       bindings: [PostService]
})

 export class Posts {
    private posts: Array<Post>;
    private totalItems: number = 64;
    private currentPage: number = 1;
    private pageChanged(event: any):void {
         console.log(event);
    };
   constructor(public postService: PostService) {
       postService.getPosts()
       .subscribe(
            res => {
            this.posts = res;
       },
      err => console.log(err),
      () => console.log('retrieved posts')
      );
   }
 }

And the HTML:

<div class="col-xs-12 col-xs-offset-0 col-md-8 col-md-offset-2">
  <table>
    <tbody>
       <tr *ngFor="#post of posts; #i=index">
         <th>{{i + 1}}.</th>
         <td><a href="{{post.url}}" target="_blank">{{post.title}}</a></td>
         <td><small>comments</small></td>
       </tr>
     </tbody>
   </table>
  {{currentPage}}
   <pagination [totalItems]="totalItems" [(ngModel)]="currentPage" (page-changed)="pageChanged($event)"></pagination>
 </div>

ng2-bootstrap tabs

hi,i use ng2-bootstrap tabs,but i find tabs's wiki different with code
wiki: import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
code: export const TAB_COMPONENTS:Array = [Tab, TabHeading, Tabset];
/**

• @deprecated - use TAB_COMPONENTS instead
• @type {Tab|TabHeading|Tabset[]}
  */
  export const tabs:Array = [Tab, TabHeading, Tabset];
  code don't have TAB_DIRECTIVES.

have problems with this? if have this problem,please update wiki,thankyou very much!

Dist directory

Angular has builded files when your library needs to be builded on my own. Is there a possibility that you change this behavior?

chore(tabs): classMap in Tabset `has changed after it was checked`

EXCEPTION: Expression 'classMap in Tabset@1:20' has changed after it was checked. Previous value: '[object Object]'. Current value: '[object Object]' in [classMap in Tabset@1:20]

<tabset>
  <tab heading="Tab 1">Tab 1 content</tab>
  <tab>
    <template tab-heading="">Tab 2</template>Tab 2 content
  </tab>
</tabset>

...
import {Alert, Collapse, TAB_COMPONENTS, DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    ...
    directives: [CORE_DIRECTIVES, NgFor, Alert, Collapse, TAB_COMPONENTS, DROPDOWN_DIRECTIVES]
})
export class header {
    public isCollapsed:boolean = true;
    private disabled:boolean = false;
    private status:{isopen:boolean} = {isopen: false};

    private toggleDropdown($event:MouseEvent):void {
        $event.preventDefault();
        $event.stopPropagation();
        this.status.isopen = !this.status.isopen;
    }

    private tabs:Array<any> = [
        {title: 'Dynamic Title 1', content: 'Dynamic content 1'},
        {title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true}
    ];

    constructor() {

    }
}

Following updated examples with TAB_COMPONENTS insted of TAB_DIRECTIVES only above issue remained using ng2 beta

Can't find the CAROUSEL_DIRECTIVES

Can't find the CAROUSEL_DIRECTIVES , so I use CAROUSEL_COMPONENTS,
however

Uncaught SyntaxError: Unexpected token <__exec @ system.src.js:1374entry.execute @ system.src.js:3300linkDynamicModule @ system.src.js:2921link @ system.src.js:2764execute @ system.src.js:3096doDynamicExecute @ system.src.js:715link @ system.src.js:908doLink @ system.src.js:569updateLinkSetOnLoad @ system.src.js:617(anonymous function) @ system.src.js:430run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
angular2-polyfills.js:138 Uncaught SyntaxError: Unexpected token <
    Evaluating http://localhost:3000/ng2-bootstrap/ng2-bootstrap
    Error loading http://localhost:3000/app/boot.js

Help to setup: system.js seed

I am trying to run the latest code in the way done in five min quick start, the compete code is here:
https://github.com/panacloud/learn-angular2/tree/master/step03_twitter_bootstrap

It is giving the following error:

chore(ide): Constructor Parameter Injectables not working in Visual Studio

Locally I haven't been able to get the ng2- components to work without updating the constructors to include @Inject() annotations and re-building.

Do you know if I'm doing something wrong?

Would it be ok to submit a pull request adding Inject() to the constructor parameters?

feat(sidenav, menubar): add new components sidenav and menubar

Can you please provide us the plan you have for menu and sidenav

chore(angular2 webpack starter): Uncaught TypeError

I used Angular2 Webpack Starter to start my app and i used ng2-bootstrap . When i run the script npm run server:prod, i got Uncaught TypeError. How could i solve this problem ?

angular2 is not a dev dependencies?

IMO angular2 should be a dependency of this package (not dev one). But of course not distributed :)

Type 'Timer' is not assignable to type 'number'.

I've got version 0.44.3:
ng2-bootstrap/components/carousel/carousel.ts(145,7): error TS2322: Type 'Timer' is not assignable to type 'number'.

chore(who knows): reproduce unknown

The demo is not working

chore(documentation) JSPM usage instructions

Shouldn't take much work. Is the plan to just split the 'Installation' section into 'Installation - NPM' and 'Installation - JSPM'?

JS Size will increase if you include both BS3 and BS4 templates in the code

Don't you think you should use better approach for separate BS3 and BS4 templates?

https://github.com/valor-software/ng2-bootstrap/blob/master/components/carousel/carousel.ts#L13-L32

Currently broken

Hi, is the example currently broken?

remove node_modules/angular2 from the distributed pkg

Having angular2 here again (obviously present in the app) messes up the typings ref (duplicate in this case) when using tsd link.

feature(typeahead): add typeahed feature

Documantion

Work in progress

feature(datepicker): add datepicker component

Add datepicker baseline functionality and docs

import component error

Getting this error on my angular 2 seed project:

I have put reference on tsd.d.ts
///<reference path="../../../node_modules/ng2-bootstrap/ng2-bootstrap.d.ts" />

At my component file:
...
import {dropdown} from 'ng2-bootstrap';
@component({
...
directives: [..., dropdown]
})

I tried to import other components like accordion, also gets same error.

issue(carousel): expose current slide index as property or event

chore(universal): should play nice with angular/universal

Currently ng2-bootstrap uses MouseEvent, KeyboardEvent and window which prevents it from using in universal angular2 application because those aren't defined server-side.