Native Angular2 directives for Bootstrap


Module License: MIT

Added by: Sam Deering





Stars: 2376

Watchers: 2376

Forks: 652

Module Description

ng2-bootstrap npm version npm downloads

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

Follow me twitter to be notified about new releases.

Angular 2 Style Guide Build Status codecov slack Join the chat at Dependency Status NPM NPM Throughput Graph

Usage & Demo

If you need more modules check here

Starter packages

Hint: simpliest way to add styles is a CDN:

<!-- index.html -->
<link href="" 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>
  /* src/app/main.ts */
  import { AlertModule, DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
    imports: [
  export class AppModule {

  /* src/app/home/home.ts */
    templateUrl: 'src/app/home/home.html'
  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

npm i ng2-bootstrap --save

Install from CDN

Check cdnjs to include ng2-bootstrap as system.js bundle

<script src=""></script>
<link href="" 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="" rel="stylesheet">

As for now datepicker is using moment.js to format date, so please update system.js config to contain mapping:

<!-- index.html -->
    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';

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

  selector: 'my-app',
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
export class AppComponent {

And you are ready to go! :)

Module stats last updated: 2018-01-15 16:00:04

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!