Why are variables not updating?

Cryptic Pug

I am probably overseeing something, but I am stuck, the following variables do not seem to be updating in the template when their values are updated in the promise:

private emailDetected: boolean = false;
private detectedEmail: string = "";

detectEmailViaPassword() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider()).then(authResult => {
        this.detectedEmail = authResult.user.email;
        this.emailDetected = true;
    }).catch(error => {
        console.log(error);
    });
}

When logging the variables, it seems that they are updated, but nothing is happening in the template. When I update the variables from somewhere else than the firebase auth promise, it works correctly -- I am extremely confused...

The variables are referred to correctly in the template: {{ detectedEmail }}

I would be very thankful for some help :)

Vlad274

(Assuming .signInWithPopup is a web-request, or other asynchronous call)

Angular change detection runs in response to use interaction with the component. If values are updated outside of that event handling, you need to manually tell the component that it has changed.

constructor(private changeDetector: ChangeDetectorRef){}

detectEmailViaPassword() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider()).then(authResult => {
        this.detectedEmail = authResult.user.email;
        this.emailDetected = true;
        this.changeDetector.markForCheck();
    }).catch(error => {
        console.log(error);
    });
}

More in depth reading: https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html


Addressing the public vs private comments:

These type descriptors are TypeScript language constructs. Once the TypeScript is compiled into JavaScript, they have no bearing on how the application functions. The TypeScript compiler can only detect access errors from other TypeScript - access from the template is (effectively) unrestricted.

Additional Discussion: "private" and "public" in Angular 2 component

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related