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.

Günter Zöchbauer · Accepted Answer · 2016-08-04 08:17:04Z

16

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

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

answered Aug 4, 2016 at 8:17

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Comments

Love-Kesh · Accepted Answer · 2016-08-04 08:20:54Z

3

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

answered Aug 4, 2016 at 8:20

Love-Kesh

8129 silver badges17 bronze badges

1 Comment

benevolentprof Over a year ago

I like this answer. When I put it into my code, I used a variable name like classScope or outerScope instead of self.

SimonR · Accepted Answer · 2020-10-14 14:53:01Z

1

Use call or apply

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

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

edited Oct 14, 2020 at 14:53

SimonR

1,2789 silver badges10 bronze badges

answered Oct 14, 2020 at 7:13

sajiyya k

111 bronze badge

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related