ng bootstrap css,angular - Angular2 ng2-bootstrap - Stack Overflow

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

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

var map = {

'app': 'app', // 'dist',

'@angular': 'node_modules/@angular',

'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',

'rxjs': 'node_modules/rxjs',

'ng2-bootstrap': 'node_modules/ng2-bootstrap'

};

// packages tells the System loader how to load when no filename and/or no extension

var packages = {

'app': { main: 'main.js', defaultExtension: 'js' },

'rxjs': { defaultExtension: 'js' },

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },

'ng2-bootstrap': { main: 'ng2-bootstrap.js', defaultExtension:'js'}

};

In index.html add these

In your component you can use like this-

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

Sample implementation:

import { Component } from '@angular/core';

import {CORE_DIRECTIVES} from '@angular/common';

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

@Component({

selector: 'my-app',

directives: [TAB_DIRECTIVES, CORE_DIRECTIVES],

template: `

My First Angular 2 App with ng2-bootstrap

Static content

[heading]="tabz.title"

[active]="tabz.active"

(select)="tabz.active = true"

(deselect)="tabz.active = false"

[disabled]="tabz.disabled"

[removable]="tabz.removable"

(removed)="removeTabHandler(tabz)">

{{tabz?.content}}

`

})

export class AppComponent {

public tabs:Array = [

{title: 'Dynamic Title 1', content: 'Dynamic content 1'},

{title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true},

{title: 'Dynamic Title 3', content: 'Dynamic content 3', removable: true}

];

}

NOTE: Latest ng2-bootstrap version is compatible with angular2 RC4 version.

See if this helps.