Angular 2 - Using 'this' inside setTimeout [duplicate]

Question

I have a function like so in my class

  showMessageSuccess(){

    var that = this;
    this.messageSuccess = true;

    setTimeout(function(){
      that.messageSuccess = false;
    },3000);

  }

How can I re-write this so I don't have to store a reference to 'this' in the 'that' var? If I use 'this' inside the setTimeout, the messageSuccess bool doesn't seem to change/get updated.

I believe this is not a duplicate, the this clause in angular is different from normal javascript. (gets converted to _this in the final code) — aliqandil
– aliqandil, Commented Aug 29, 2018 at 0:05

Yuriy Yakym · Accepted Answer · 2021-07-07 14:01:32Z

484

You need to use Arrow function ()=> ES6 feature to preserve this context within setTimeout.

// var that = this;                        // no need of this line
this.messageSuccess = true;

setTimeout(()=>{                           // <<<---using ()=> syntax
    this.messageSuccess = false;
}, 3000);

edited Jul 7, 2021 at 14:01

Yuriy Yakym

3,96621 silver badges33 bronze badges

answered Dec 12, 2016 at 17:20

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

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

7 Comments

micronyks Over a year ago

It always works. There could be some other problem. i'd like you to investigate it or you can ask a relevant question @RomainBruckert

sid Over a year ago

thats a great answer!! Thanks, solved a big problem. By the way can you please suggest where else do we need to use ()=> in angular 7?

micronyks Over a year ago

@sid: That is ES6/ES7 standard. If you use typescript, it is used everywhere.

sid Over a year ago

ok so everytime i use angular7/typescript, i have to use () => right?

Manuel Azar Over a year ago

Does not work in angular/typescript.... still have to store the outer scope in a variable...

|

Collectives™ on Stack Overflow

Angular 2 - Using 'this' inside setTimeout [duplicate]

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related