title: Kindly Someone suggest how to bind datepicker value in my form using ng-model
body: <p>Here's <code>datepicker.ts</code></p>
  
  <pre><code>import { Component, HostListener, ViewChild } from '@angular/core';
  import { BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
  
  @Component({
      selector: 'demo-date-picker-hide-on-scroll',
      templateUrl: './datepicker-popup.html'
  })
  
  export class DemoDatepickerHideOnScrollComponent {
  
      @ViewChild(BsDatepickerDirective) datepicker: 
      BsDatepickerDirective;
  
      @HostListener('window:scroll')
          onScrollEvent() {
          this.datepicker.hide();
      }
  }
  </code></pre>
  
  <p>and <code>datepicker.html</code></p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-12 col-md-9 form-group"&gt;
        &lt;input
          placeholder="Datepicker"
          class="form-control"
          #dp="bsDatepicker"
          bsDatepicker&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I have added datepicker component. It's working fine. I'm getting
      datepicker in my form but, I'm not able to bind my datepicker value
      using <code>[(ngModel)]</code>. Please, someone suggest the way to get the value in
      my console.</p>