title: Cannot use ng-Bootstrap datepicker
body: <p>I cloned quickstart project from tour of heroes <a href="https://angular.io/guide/setup" rel="nofollow noreferrer">https://angular.io/guide/setup</a> and I try to add ng-Bootstrap datepicker but it doesn't work. My project:</p>
  
  <p>app.module.ts:</p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { JsonpModule } from '@angular/http';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  import { AppComponent }  from './app.component';
  import { MyDatePicker } from './datepicker/my-datepicker.component';
  
  @NgModule({
    imports:      [ BrowserModule, NgbModule.forRoot() ],
    declarations: [ AppComponent, MyDatePicker ],
    bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    template: `
    &lt;h1&gt;Hello {{name}}&lt;/h1&gt;
    &lt;my-datepicker&gt;&lt;/my-datepicker&gt;
    `,
  })
  export class AppComponent  { name = 'Angular'; }
  </code></pre>
  
  <p>my-datepicker.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
  
  const now = new Date();
  
  @Component({
      selector: 'my-datepicker',
      templateUrl: './my-datepicker.component.html',
      styleUrls: [ './my-datepicker.component.css' ]
  })
  export class MyDatePicker {
  
      title: string = 'My datepicker';
  
      model: NgbDateStruct;
      date: {year: number, month: number};
  
      selectToday() {
          this.model = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
      }
  
  }
  </code></pre>
  
  <p>my-datepicker.component.html</p>
  
  <pre><code>{{ title }}
  
  &lt;p&gt;Simple datepicker&lt;/p&gt;
  
  &lt;ngb-datepicker&gt;&lt;/ngb-datepicker&gt;
  </code></pre>
  
  <p>systemjs.config.js:</p>
  
  <pre><code>/**
   * System configuration for Angular samples
   * Adjust as necessary for your application needs.
   */
  (function (global) {
    System.config({
      paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
      },
      // map tells the System loader where to look for things
      map: {
        // our app is within the app folder
        'app': 'app',
  
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  
        // other libraries
        'rxjs':                      'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
        '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'
      },
      // packages tells the System loader how to load when no filename and/or no extension
      packages: {
        app: {
          defaultExtension: 'js',
          meta: {
            './*.js': {
              loader: 'systemjs-angular-loader.js'
            }
          }
        },
        rxjs: {
          defaultExtension: 'js'
        }
      }
    });
  })(this);
  </code></pre>
  
  <p>But it doesn't work. The result I get is : <a href="https://i.stack.imgur.com/LPY4z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LPY4z.png" alt="enter image description here"></a></p>
  
  <p>it's very strange, why it looks so?</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Angular QuickStart&lt;/title&gt;
      &lt;base href="/"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
  
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;!-- Polyfill(s) for older browsers --&gt;
      &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        System.import('main.js').catch(function(err){ console.error(err); });
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;my-app&gt;Loading AppComponent content here ...&lt;/my-app&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>After update index.html datepicker looks like well but now I can't bind ngModel and I got an error:</p>
  
  <pre><code>Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
      at bootstrap.min.js:6
  (anonymous) @ bootstrap.min.js:6
  zone.js:655 Unhandled Promise rejection: Template parse errors:
  Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'.
  1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
  2. If 'ngb-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  &lt;p&gt;Simple datepicker&lt;/p&gt;
  
  &lt;ngb-datepicker #dp [ERROR -&gt;][(ngModel)]="model" (navigate)="date = $event.next"&gt;&lt;/ngb-datepicker&gt;
  
  &lt;hr/&gt;
  "): ng:///app/datepicker/my-datepicker.component.html@8:20 ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: Error: Template parse errors:
  Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'.
  1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
  2. If 'ngb-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  &lt;p&gt;Simple datepicker&lt;/p&gt;
  
  &lt;ngb-datepicker #dp [ERROR -&gt;][(ngModel)]="model" (navigate)="date = $event.next"&gt;&lt;/ngb-datepicker&gt;
  </code></pre>