CODEWITHSUNDEEP
angular
edamerau
edamerau

Reputation: 481

Angular2 ng2-bootstrap

I'm having some trouble adding bootstrap to my angular2 project.

As documented on https://valor-software.com/ng2-bootstrap/ I've installed ng-bootstrap to the node-modules directory by npm install --save ng2-bootstrap (moment is included in the same directory).

Adding 

import {Component, ChangeDetectionStrategy} from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import {TAB_DIRECTIVES} from '@ng2-bootstrap';

leads to the following error error TS2307: Cannot find module '@ng2-bootstrap'. Also changed the path from '../../../ng2-bootstrap' to '@ng2-bootstrap'.

Both did not work. any ideas how to fix it?

Upvotes: 1

Views: 2164

Answers (2)

edamerau
edamerau

Reputation: 481

UPDATE: Here's an interesting article on how to implement bootstraps latest version 4 Alpha into your angular project with ng-cli. https://angularjs.de/artikel/angular2-bootstrap-scss-angular-cli

Upvotes: 1

Sanket
Sanket

Reputation: 20017

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

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

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: `<h1>My First Angular 2 App with ng2-bootstrap</h1>

    <tabset>
    <tab heading="Static title">Static content</tab>
    <tab *ngFor="let tabz of tabs"
         [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}}
    </tab>
  </tabset>

  `
})
export class AppComponent {
    public tabs:Array<any> = [
    {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.

Upvotes: 2

Related Questions