title: Angular2: call component method from javascript function
body: <p>Currently I'm trying to implement bootstrap datepicker, which using <code>jQuery</code>, with my Angular2 project. Here is what I have so far:</p>
  
  <pre><code>import {Component, AfterViewInit, Injector, Inject} from '@angular/core';
  import {ObservableService} from "../../../services/data-observable.service";
  declare var $:any;
  
  @Component({
      selector: 'date-range',
      moduleId: module.id,
      template: `&lt;input name="daterange" class="filter-date-range"/&gt;`
  })
  
  export class DateRange implements AfterViewInit {
  
      options = { locale: {
          format: 'YYYY-MM-DD'
      },
          startDate: '2013-01-01',
          endDate: '2013-12-31'};
  
      constructor(@Inject(Injector) private injector: Injector,
                  @Inject(ObservableService) private _observable: ObservableService) { }
  
      ngAfterViewInit() {
          $('input[name="daterange"]').daterangepicker(
              this.options,
              function (start, end) {
                  let obj = {};
                  obj['start'] = start;
                  obj['end'] = end;
  
                  this._observable.updateFilter(obj);
              }
          );
      }
  }
  </code></pre>
  
  <p>Everything works perfect, except this piece of code</p>
  
  <pre><code>this._observable.updateFilter(obj);
  </code></pre>
  
  <p>Here I'm trying to path <code>ObservableService</code> method call into <code>daterangepicker</code> callback function, which activates each time date value changed. So, I'm getting a </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'updateFilter' of undefined
  </code></pre>
  
  <p>error.</p>
  
  <p>How can I call a method of Angular2 component, service or whatever inside <code>js</code> function?</p>