valor-software / ngx-bootstrap Goto Github PK

View Code? Open in Web Editor NEW

5.5K 206.0 1.7K 37.33 MB

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

Home Page: https://valor-software.com/ngx-bootstrap

License: MIT License

JavaScript 1.08% TypeScript 90.79% HTML 5.81% Shell 0.17% Dockerfile 0.01% SCSS 1.62% CSS 0.53%

angular bootstrap components datepicker daterangepicker modals popover sortable carousel typeahead

ngx-bootstrap's People

Contributors

Stargazers

Watchers

Forkers

jimthedev buchslava shootermv betrozov natali-abyss madhukard rkintzi korel-san dart-league akirasosa hideakiaoki0519 yunlong2cn khanani92 krustie101 gitter-badger ryzy bertvh jinhong- miqmago ciriarte nathanwalker appfeel achreftlili kirtikathpal quinntynebrown lorenzoni louisscruz sallyone tazaka schuraek nn77 roddeck j4dream badalgeek jensworkgit pingjiang markosulamagi mapaxe amanwebdev bitbay martinmcwhorter krzysztofsaja rluba mattmull82 rogermeritt lanocturne tanangular flea505 rschaniel niczero kienbd davidfang olivierceulemans mahmutduva maxime-colin fleetingwang brunoalcau kambojankit valery-barysok vpquant chenyukunjoshhub mohammedzamakhan dawnthorn 5145813 yannickadam jdelgadoalfonso mjgp2 akhlesh midroid monkeydo frontend-3 nolanus cwz8202 cmsdesigner dandingol03 linusbrolin jhuntoo fkowal msallati paruldixit freewayspb apimobi s-soltys koodikindral tyohannes xiahl1990 brosenberger d-huyn cinelovers rbaarsma bramleffers adrianromanko tristanmenzel itryapitsin ninjaa wadewy nutman celebes johansmolders dricha

ngx-bootstrap's Issues

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>

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(documentation) JSPM usage instructions

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

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'.

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???

feature(typeahead): add typeahed feature

feature(datepicker): add datepicker component

Add datepicker baseline functionality and docs

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]

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

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): add systemjs bundles

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

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

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!

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?

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".

Currently broken

Hi, is the example currently broken?

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.

Documantion

Work in progress

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.

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

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

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!

issue(tabs): tab header not preventing default

fixed, close this when PR merged

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

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

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.

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.

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

typeahead.ts line 49 should be [innerHtml]

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

Many thanks for your efforts.

angular2 is not a dev dependencies?

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

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?

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?

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(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 ?

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?

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

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>

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

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.

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

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

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:

I inlcude <script src="node_modules/ng2-bootstrap/build/angular2-bootstrap.js"></script>
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!

chore(who knows): reproduce unknown

The demo is not working

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.

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 ?

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?

Upgrade: to ng2 alfa 36

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

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.

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: