What is the correct way to import ng2-bootstrap into an Angular2 application?

Question

I am trying to have a responsive application bar based on the bootstrap example here - http://getbootstrap.com/components/#navbar

I removed most of the code and placed the result on JSBin - http://jsbin.com/juvalaj/edit?html,output . When the screen is resized to extra small the right-most options collapse into a menu:

Clicking the right most button yields:

Nice.

Now I am trying to do the same in Angular 2. Here is the plunker - http://plnkr.co/edit/doDyRQSV6aBqZ0KLgGnz

The css works correctly, but clicking the button does nothing - we need the bootstrap code for that. I am puzzled where to plug the ng2-bootstrap. I do not need to import any components from it, but if it works like the original bootstrap then just the essence of including it should make the button work.

The plunker was started off the Angular 2 template ( http://plnkr.co/edit/nl0F7N?p=preview ) by:

adding app/app-bar.component.ts :

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

@Component({
    selector: 'app-bar',
    styles: [`
    .app-bar {
      height: 65px;
      padding: 5px 30px;
      background-color: #00BCD4;
    }
    .logo {
      color: white;
      font-size: 30px;
      font-weight: 300;
      cursor: pointer;
    }
    .link {
      color: white;
      font-size: 24px;
      font-weight: 400;
      cursor: pointer;
    }
  `],
    template: `
<nav class="app-bar navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-bar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="logo navbar-brand" href="#">My&nbsp;App</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="app-bar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" class="link">Settings</a></li>
        <li><a href="#" class="link">Sign&nbsp;out</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
`
})
export class AppBarComponent {}

changing app/app.component.ts to

import { Component } from '@angular/core';
import { AppBarComponent } from './app-bar.component';

@Component({
  selector: 'my-app',
  directives: [AppBarComponent],
  template: '<app-bar></app-bar>'
})
export class AppComponent { }

adding bootstrap css to index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

clearing completely styles.css

---

And now I am looking for a way to import ng2-bootstrap code. How can I do it?

Answer 1

Ok, here is a working example: http://embed.plnkr.co/k9s1LnJU5cVy18yid7Va/

You had to:

Configure SystemJS to load ng2-boostrap and moment

  //map tells the System loader where to look for things
    var map = {
      'app': 'app',
      .....
      'ng2-bootstrap': 'https://npmcdn.com/ng2-bootstrap@1.0.24',
      'moment': 'https://npmcdn.com/moment',
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app': {
      main: 'main.ts',
      defaultExtension: 'ts'
    },
    ...
    'ng2-bootstrap': {
      main: 'ng2-bootstrap.js',
      defaultExtension: 'js'
    },
    'moment': {
      main: 'moment.js',
      defaultExtension: 'js'
    }
  };

Import the ng2-bootstrap directives

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

And here is your component with a working toggle button:

import { Component } from '@angular/core';
import { AppBarComponent } from './app-bar.component';

import {CORE_DIRECTIVES} from '@angular/common';
import {FORM_DIRECTIVES} from '@angular/forms';
import {BUTTON_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [AppBarComponent, BUTTON_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
  template: `
  <app-bar></app-bar>
  <button type="button" class="btn btn-primary"
        [(ngModel)]="singleModel" btnCheckbox
        btnCheckboxTrue="1" btnCheckboxFalse="0">
        Single Toggle
  </button>
  singleModel: {{singleModel}}
  `
})
export class AppComponent { }