how to use ng2-bootstrap for angular2 in visual studio code

Question

Is there any set of steps to be able to use ng2 bootstrap in an Angular2 application using VS CODE IDE. Please share the same. Shall be thankful. I have installed the ng2-bootstrap module using following command:

npm install ng2-bootstrap --save

what to be done after this step? Do we need moment.js to be able to use ng2-bootstrap?

Answer 1

After you ran npm install --save ng2-bootstrap, you need follow these steps-

In Systemjs.config.js, configure ng2-bootstrap like this-

  // map tells the System loader where to look for things
  var map = {
    'moment': 'node_modules/moment/moment.js',
    'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };

In index.html add these

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
 <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

In your component you can use like this-

import {AlertComponent } from 'ng2-bootstrap/ng2-bootstrap';

Sample implementation:

import {Component} from '@angular/core';
import {AlertComponent } from 'ng2-bootstrap/ng2-bootstrap';
import {NgModel} from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <alert type="info">ng2-bootstrap hello world!</alert>
      <pre>Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
      <h4>Inline</h4>
      <div style="display:inline-block; min-height:290px;">
        <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
      </div>
  `,
})
export class AppComponent {
  public dt:Date = new Date();
  private minDate:Date = null;
  private events:Array<any>;
  private tomorrow:Date;
  private afterTomorrow:Date;
  private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
  private format = this.formats[0];
  private dateOptions:any = {
    formatYear: 'YY',
    startingDay: 1
  };
  private opened:boolean = false;

  public getDate():number {
    return this.dt && this.dt.getTime() || new Date().getTime();
  }
}

And in app.module.ts import Ng2BootstrapModule like this-

import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';

....
  imports: [
    BrowserModule,
    FormsModule,
    Ng2BootstrapModule
  ],
....

Also, you can refer this plunker