title: ngx-bootstrap datepicker doesnt work
body: <p>I am learning about angular2 and bootstrap4. My company uses the following site.
  <a href="http://valor-software.com/ngx-bootstrap/#/datepicker" rel="nofollow noreferrer">http://valor-software.com/ngx-bootstrap/#/datepicker</a>
  The calendar showed up but if I click something, nothing happens.
  I have no idea why the site can't be moved. Could you anyone help me?</p>
  
  <p>*app.component.html:</p>
  
  <pre><code>&lt;style&gt;
    .full button span {
      background-color: limegreen;
      border-radius: 32px;
      color: black;
    }
    .partially button span {
      background-color: orange;
      border-radius: 32px;
      color: black;
    }
  &lt;/style&gt;
  
  &lt;div&gt;
    &lt;div class="card"&gt;
      &lt;pre class="card-block card-header"&gt;Selected date is: &lt;em *ngIf="dt"&gt;{{ getDate() | date:'fullDate'}}&lt;/em&gt;&lt;/pre&gt;
    &lt;/div&gt;
    &lt;h4&gt;Inline&lt;/h4&gt;
    &lt;div style="display:inline-block; min-height:290px;"&gt;
      &lt;datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true" [dateDisabled]="dateDisabled"&gt;&lt;/datepicker&gt;
    &lt;/div&gt;
  
    &lt;hr /&gt;
    &lt;button type="button" class="btn btn-sm btn-info" (click)="today()"&gt;Today&lt;/button&gt;
    &lt;button type="button" class="btn btn-sm btn-default btn-secondary" (click)="d20090824();"&gt;2009-08-24&lt;/button&gt;
    &lt;button type="button" class="btn btn-sm btn-danger" (click)="clear()"&gt;Clear&lt;/button&gt;
    &lt;button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMin()" tooltip="After today restriction"&gt;Min date&lt;/button&gt;
    &lt;button type="button" class="btn btn-sm btn-default btn-secondary" (click)="disableTomorrow()"&gt;Disable Tomorrow&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>*app.module.ts:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import { DatepickerModule } from 'ngx-bootstrap/datepicker';
  
  import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
  import { ModalModule } from 'ngx-bootstrap/modal';
  import { PaginationModule } from 'ngx-bootstrap/pagination';
  import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
  import { ButtonsModule } from 'ngx-bootstrap/buttons';
  import { FormsModule } from '@angular/forms';
  
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      DatepickerModule.forRoot(), ButtonsModule.forRoot(), TypeaheadModule.forRoot(), PaginationModule.forRoot(), ModalModule.forRoot(), BsDropdownModule.forRoot(), BrowserModule, FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>*app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import * as moment from 'moment';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    title = 'app';
  }
  export class DemoDropdownBasicLinkComponent {
    public items: string[] = ['The first choice!',
      'And another choice for you.', 'but wait! A third!'];
  
    public onHidden(): void {
      console.log('Dropdown is hidden');
    }
    public onShown(): void {
      console.log('Dropdown is shown');
    }
    public isOpenChange(): void {
      console.log('Dropdown state is changed');
    }
  }
  export class DemoButtonsRadioComponent {
    public radioModel: string = 'Middle';
  }
  export class DemoButtonsBasicComponent {
    public singleModel: string = '1';
  }
  export class DemoButtonsDisabledComponent {
    public disabled: boolean = true;
  
  }
  export class DatepickerDemoComponent {
    public dt: Date = new Date();
    public minDate: Date = void 0;
    public events: any[];
    public tomorrow: Date;
    public afterTomorrow: Date;
    public dateDisabled: {date: Date, mode: string}[];
    public formats: string[] = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY',
      'shortDate'];
    public format: string = this.formats[0];
    public dateOptions: any = {
      formatYear: 'YY',
      startingDay: 1
    };
    private opened: boolean = false;
  
    public constructor() {
      (this.tomorrow = new Date()).setDate(this.tomorrow.getDate() + 1);
      (this.afterTomorrow = new Date()).setDate(this.tomorrow.getDate() + 2);
      (this.minDate = new Date()).setDate(this.minDate.getDate() - 1000);
      (this.dateDisabled = []);
      this.events = [
        {date: this.tomorrow, status: 'full'},
        {date: this.afterTomorrow, status: 'partially'}
      ];
    }
  
    public getDate(): number {
      return this.dt &amp;&amp; this.dt.getTime() || new Date().getTime();
    }
  
    public today(): void {
      this.dt = new Date();
    }
  
    public d20090824(): void {
      this.dt = moment('2009-08-24', 'YYYY-MM-DD')
        .toDate();
    }
  
    public disableTomorrow(): void {
      this.dateDisabled = [{date: this.tomorrow, mode: 'day'}];
    }
  
    // todo: implement custom class cases
    public getDayClass(date: any, mode: string): string {
      if (mode === 'day') {
        let dayToCheck = new Date(date).setHours(0, 0, 0, 0);
  
        for (let event of this.events) {
          let currentDay = new Date(event.date).setHours(0, 0, 0, 0);
  
          if (dayToCheck === currentDay) {
            return event.status;
          }
        }
      }
  
      return '';
    }
  
    public disabled(date: Date, mode: string): boolean {
      return ( mode === 'day' &amp;&amp; ( date.getDay() === 0 || date.getDay() === 6 ) );
    }
  
    public open(): void {
      this.opened = !this.opened;
    }
  
    public clear(): void {
      this.dt = void 0;
      this.dateDisabled = undefined;
    }
  
    public toggleMin(): void {
      this.dt = new Date(this.minDate.valueOf());
    }
  }
  </code></pre>