神刀安全网

Native Angular2 directives for Bootstrap

ng2-bootstrap Native Angular2 directives for Bootstrap Native Angular2 directives for Bootstrap

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

Follow me Native Angular2 directives for Bootstrap to be notified about new releases.

Native Angular2 directives for Bootstrap Native Angular2 directives for Bootstrap Native Angular2 directives for Bootstrap Native Angular2 directives for Bootstrap Native Angular2 directives for Bootstrap Native Angular2 directives for Bootstrap

Native Angular2 directives for Bootstrap

Usage & Demo

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

If you need more modules checkhere

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

With system.js:angular2-quickstart

With webpack: AngularClass/angular2-webpack-starter

  • install ng2-bootstrap and typings for moment.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/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 inangular2-quickstart
  • and moment.js map in system.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 cloneangular2-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'     }   });

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! :)

API

Check demo for API documentation

Contribution

Please read central ng2 modulesreadme for details, plans and approach and welcome :)

Credits

Crossbrowser testing sponsored by Browser Stack Native Angular2 directives for Bootstrap

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Native Angular2 directives for Bootstrap

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址