Angular 2 "this" unable to access global variable in nested function

Question

I'm quite new to Angular 2. Would like to ask how can I access "task_title" in the startTimer(). All I got from the console.log() is undefined. I believe the "this" was pointing to the function itself so I couldn't get the value of "task_title".

Is there anyway I can access to global variable in Typescript in a nested function?

export class DashboardComponent {

    task_title: string;

    myTimer = setTimeout(this.startTimer, 2000);

    updateTask(event: any){
        clearTimeout(this.myTimer);
        this.task_title = event.target.value;
        this.myTimer = setTimeout(this.startTimer, 2000);
    }

    startTimer() {
        console.log(this.task_title);
        this.myTimer = setTimeout(this.startTimer, 2000);
    };
}

Result: Undefined.

Answer 1

Use arrow functions or .bind(this) to retain the scope of this

myTimer = setTimeout(this.startTimer.bind(this), 2000);
myTimer = setTimeout(() => this.startTimer(), 2000);

Answer 2

Use reference for this like var self=this

export class DashboardComponent {

var self=this;


task_title: string;

myTimer = setTimeout(self.startTimer, 2000);

updateTask(event: any){
    clearTimeout(self.myTimer);
    self.task_title = event.target.value;
    self.myTimer = setTimeout(self.startTimer, 2000);
}

startTimer() {
    console.log(self.task_title);
    self.myTimer = setTimeout(self.startTimer, 2000);
};
}

Answer 3

Use call or apply

myTimer = setTimeout(this.startTimer.call(this), 2000);

myTimer = setTimeout(this.startTimer.apply(this), 2000);