Native Angular2 directives for Bootstrap, works with Bootstrap 3 and 4-alfa
Follow me at twitter to be notified about new releases.
http://valor-software.github.io/ng2-bootstrap/
If you need more modules check here
With system.js: angular2-quickstart
With webpack: https://github.com/AngularClass/angular2-webpack-starter
With gulp: pkozlowski-opensource/ng2-play
With angular2-seed: mgechev/angular2-seed
npm i ng2-bootstrap --save
Check cdnjs to include ng2-bootstrap
as system.js
bundle
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Hint: you can just clone angular2-quickstart
Important: angular2 5 min quickstart tutorial is using angular2 0-beta.0
, ng2-bootstrap is already updated for 0-beta.3
, to avoid facing wierd issues, please update following dependecies in package.json
"dependencies": {
"angular2": "2.0.0-beta.3",
...
}
If you are following Angular2 5 min quickstart guide, just add one line
<!-- index.html -->
<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
As for now datepicker
is using moment.js
to format date, so please update system.js
config to contain mapping:
<!-- index.html -->
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
moment: 'node_modules/moment/moment.js'
}
});
And update your app.component.ts
to have following content:
import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'my-app',
directives: [Alert],
template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}
And you are ready to go! :)
Check demo for API documentation
Please read central ng2
modules readme for details, plans and approach and welcome :)