dhtmlx inside angular2 component

Question

I want to use the dhtmlx onEmptyClick event in my Angular2 component, inside which I want to call my component’s function called changewall(), but getting an error:

this.changeWall is not a function

If I put changewall() outside scheduler.attachEvent the body works fine. Why is this happening?

DOES NOT WORK:

 scheduler.attachEvent("onEmptyClick", function (date, e ){
                        console.log('clickBefore');
                        this.changeWall(1511305200000);
                        console.log('clickAfter');
                    });

THIS WORKS:

 this.changeWall(1511305200000);
     scheduler.attachEvent("onEmptyClick", function (date, e ){
                                console.log('clickBefore');
                                console.log('clickAfter');
                            });

Whole code:

import {Component, OnInit, AfterViewInit, HostListener} from '@angular/core';
import {WallService} from "../../services/wall.service";
declare var scheduler:any; //hide errors
@Component({
    moduleId: module.id,
    selector: 'big-calendar',
    templateUrl: 'calendar2.component.html',
    styleUrls: ['calendar2.component.scss']
})
export class Calendar2Component implements AfterViewInit {
    private wallInstance: any;
    events: any;
    constructor(private _wall: WallService) {

    }

    @HostListener('click', ['$event'])
    onClick(e) {
    // this.refreshCalendar();
    }

    refreshCalendar(){
        let date = new Date(scheduler.getState().date);
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        // scheduler.clearAll();

        scheduler.attachEvent("onEmptyClick", function (date, e ){
            console.log('clickBefore');
            this.changeWall(1511305200000);
            console.log('clickAfter');
        });

        this._wall.getCalendarEvents(month, year).subscribe((data: any)=>{
            console.log(data);
            let i = 0, events = [];

            while(i < data.events.length){
                events.push({
                    holder: "t", //userdata
                    room:   "1" ,
                    text: data.events[i].name,
                    start_date: data.events[i].start,
                    end_date: data.events[i].end +1
                });

                i++;
            }
            console.log(events);
            scheduler.init('scheduler_here',new Date(),"month");

            scheduler.parse(events,"json");
        });
    }


    ngAfterViewInit(): void {
        scheduler.config.touch = "force";
         this.refreshCalendar();
        // scheduler.parse([
        //     {id:1, text:"Meeting",   start_date:"04/11/2016 14:00",end_date:"14/12/2016 17:00"}
        // ],"json");
    }

        changeWall(timestamp){
        // let timestamp = new Date(date).getTime();
        // console.log(timestamp);
        this.wallInstance = this._wall.getInstance();
        this.wallInstance.timeChanger(timestamp);
    }
}

Answer 1

scheduler.attachEvent("onEmptyClick", function (date, e ){

should be

scheduler.attachEvent("onEmptyClick", (date, e ) => {

and also change the other places where you use function

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions