Angular2: call component method from javascript function [duplicate]

Question

Currently I'm trying to implement bootstrap datepicker, which using jQuery, with my Angular2 project. Here is what I have so far:

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: `<input name="daterange" class="filter-date-range"/>`
})

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);
            }
        );
    }
}

Everything works perfect, except this piece of code

this._observable.updateFilter(obj);

Here I'm trying to path ObservableService method call into daterangepicker callback function, which activates each time date value changed. So, I'm getting a

Uncaught TypeError: Cannot read property 'updateFilter' of undefined

error.

How can I call a method of Angular2 component, service or whatever inside js function?

Valikhan Akhmedov · Accepted Answer · 2016-12-26 10:08:46Z

3

Use arrow function in callback:

     $('input[name="daterange"]').daterangepicker(
        this.options,
        (start, end) => {
            let obj = {};
            obj['start'] = start;
            obj['end'] = end;

            this._observable.updateFilter(obj);
        }
    );

Or use bind method of Function:

     $('input[name="daterange"]').daterangepicker(
        this.options,
        function (start, end) {
            let obj = {};
            obj['start'] = start;
            obj['end'] = end;

            this._observable.updateFilter(obj);
        }.bind(this);
    );

answered Dec 26, 2016 at 10:08

Valikhan Akhmedov

9961 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michał Perłakowski Over a year ago

Questions like this has been already asked many times. Instead of answering them, please flag as a duplicate.

Majesty Over a year ago

Anyways that is a correct answer, thanks!

vigamage Over a year ago

@Valikhan Akhmedov can you have a little look at following question which is similar to this.stackoverflow.com/questions/44111238/…

Collectives™ on Stack Overflow

Angular2: call component method from javascript function [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related