ng2-bootstrap

Native Angular2 directives for Bootstrap
9 people use it
Submitted by: 1107171?v=3 valorkin

ng2-bootstrap npm version npm downloads

Native Angular2 directives for Bootstrap, works with Bootstrap 3 and 4-alfa

Follow me at twitter to be notified about new releases.

Build Status Code Climate Join the chat at https://gitter.im/valor-software/ng2-bootstrap Dependency Status devDependency Status Throughput Graph

Usage & Demo

http://valor-software.github.io/ng2-bootstrap/

If you need more modules check here

Starter packages

Hint: simpliest way to add styles is a CDN: html <!-- index.html --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

With system.js: angular2-quickstart

With webpack: AngularClass/angular2-webpack-starter

  • install ng2-bootstrap and typings for moment.js bash npm install ng2-bootstrap --save # Install typings from NPM. Ambient typings will not help typings install moment --save
  • add some code html <!-- 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> js /* src/app/home/home.ts */ import {Alert, DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; ... @Component({ directives: [ ... Alert, DATEPICKER_DIRECTIVES ] }) export class Home { date: Date = new Date(); }

With gulp and system.js: pkozlowski-opensource/ng2-play or mgechev/angular2-seed

  • hint: see quickstart section below for samples
  • just add link to ng2-bootstrap system.js bundle to index.html like in angular2-quickstart
  • and moment.js map in system.js configuration

Install from npm

Install from CDN

Check cdnjs to include ng2-bootstrap as system.js bundle html <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

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 json "dependencies": { "angular2": "2.0.0-beta.3", ... }

If you are following Angular2 5 min quickstart guide, just add one line html <!-- 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: html <!-- 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:

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

comments powered by Disqus
This page was last updated about 1 year ago.