Angular2: Access class variable within anonymous function

Question

I'm sure there is a simple way to do this but I can't seem to find it. Here is my code

export class UserLoginComponent {
private user: User;
public authService: AuthService;

constructor(private cognitoConfigs: CognitoUtil, authService: AuthService) {
    this.user = new User();
    this.authService = authService;
}

authenticate() {

    // Some work being done here
    let cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);

    cognitoUser.authenticateUser(authenticationDetails, {

        onSuccess: function(result: any) {
            this.authService.login(this.user, result);
        },
        onFailure: function(err: any) {
            console.log(err.message);
        },

    });

}
}

Problem: In the onSuccess callback I can't access the this.authService variable which belongs to it's parent class.

Baljeetsingh Sucharia · Accepted Answer · 2018-09-08 17:53:04Z

31

Don't use function () because it changes the scope of this.

Arrow functions retain the scope of this

    onSuccess: (result: any) => {
        this.authService.login(this.user, result);
    },
    onFailure: (err: any) => {
        console.log(err.message);
    },

edited Sep 8, 2018 at 17:53

Baljeetsingh Sucharia

2,0772 gold badges20 silver badges39 bronze badges

answered Sep 19, 2016 at 14:16

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

Mini Bhati · Accepted Answer · 2016-09-19 14:25:43Z

12

The problem here is that the success callback function is in a different lexical environment. This is why in ES6+ functions can be defined using arrow functions =>.

onSuccess:(result: any) => {
        this.authService.login(this.user, result);
}

or assign this to a variable outside the scope of the function with the ES5 syntax:

var self = this;

onSuccess: function(result: any) {
    self.authService.login(this.user, result);
}

answered Sep 19, 2016 at 14:25

Mini Bhati

3435 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular2: Access class variable within anonymous function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related