Native Angular2 directives for Bootstrap, works with Bootstrap 3 and 4-alfa
Follow me to be notified about new releases.
Usage & Demo
http://valor-software.github.io/ng2-bootstrap/
here
If you need more modules checkStarter packages
Hint: simpliest way to add styles is a CDN:
<!-- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
angular2-quickstart
With system.js:AngularClass/angular2-webpack-starter
With webpack:- install
ng2-bootstrap
and typings formoment.js
npm install ng2-bootstrap --save
# Install typings from NPM. Ambient typings will not help
typings install moment --save
- add some code
<!-- src/app/home/home.html -->
<alert type="info">Hello from ng2-bootstrap {{ date.toDateString() }}</alert>
<div style="display:inline-block; min-height:290px;">
<datepicker [(ngModel)]="date" showWeeks="true"></datepicker>
</div>
/* src/app/main.ts */
import { AlertModule, DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
...
@NgModule({
imports: [
...
AlertModule,
DatepickerModule
]
...
})
export class AppModule {
}
/* src/app/home/home.ts */
...
@Component({
templateUrl: 'src/app/home/home.html'
})
export class Home {
date: Date = new Date();
}
pkozlowski-opensource/ng2-play or mgechev/angular2-seed
With gulp and system.js:- hint: see
quickstart
section below for samples - just add link to
ng2-bootstrap
system.js
bundle toindex.html
like in angular2-quickstart - and
moment.js
map insystem.js
configuration
Install from npm
npm i ng2-bootstrap --save
Install from CDN
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">
Quick start
Hint: you can just clone angular2-quickstart
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'
}
});
Add Ng2BootstrapModule as imported module in your application module app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, Ng2BootstrapModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
And update your app.component.ts
to have following content:
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}
And you are ready to go! :)
API
Check demo for API documentation
Contribution
Please read central ng2
modules readme for details, plans and approach and welcome :)
Credits
Crossbrowser testing sponsored by Browser Stack