Angular: Code execution in lambda does not affect the template

Question

I'm building app using Angular 2 and stumbled on this problem. When performing ajax call, we usually call them in this fashion:

http.post(this.baseUrl + url, data, { headers: headers}).subscribe(
    result => {
        this.showForm = false;
    },
    error => {
        this.showForm = true;
    }
);

The showForm is a property of Component which indicate when to add/remove the form, i.e: by setting *ngIf="showForm". If I executing that code, when the ajax call is success, the form will be removed from the DOM, and if the call is failed, the form stay. This is the correct behavior.

Things a little different though, when I executing Facebook Login API. As per the tutorial said, the code should be like this:

FB.getLoginStatus(response => {
    if (response.status === 'connected') {
        this.showForm = false;
    }
    else {
        this.showForm = true;
    }
});

When I executed that code, in the condition where the user already logged in to facebook and already signed in on the app (response.status is 'conencted'), the code will be executing this.showForm = false; inside the response lambda. Following previous behavior, this should be removing the form from the DOM.I've tried to debug it on Chrome and this.showForm = true; was indeed executed.

The problem is, although that line of code was executed, the form wasn't removed. Only when I execute this exact code twice or thrice, that the form finally notice the value changes and adjust the view accordingly. This makes the user need to click the facebook login button (which will call that FB.getLoginStatus()) twice or thrice, before he can actually signed in.

Is there any fix on this? Or does my way of using FB.getLoginStatus() was wrong? I need some enlightenment here.

EDIT: Fixing wrong executed code, where if response.status is 'conencted', the code will be executing this.showForm = false;, instead of this.showForm = true; which I previously wrote.

It is really `connected`. The debugger stepped in the `if` block. The issue is not whether I shoud detect is connected or not connected. It was that even though the flag is flipped, the view isn't refreshed. Which was answered by @Adam Szmyd bellow. — Firanto, Aug 22 '17 at 10:06

score 1 · Accepted Answer · answered Aug 22 '17 at 05:58

1

I think You've messed up something. You wrote:

When I executed that code, in the condition where the user already logged in to facebook and already signed in on the app (response.status is 'conencted'), the code will be executing this.showForm = true;

but in fact it should execute the first block, so this.showForm = false and should hide the form if You have *ngIf="showForm".

If You're sure that the variable is properly being set (proper part of code is executed) but the View itself is not updated, You can try to update the view manually - maybe Angular just didn't detected this change because of Facebook's async callback.

Check this answer to figure out how to run Angular's detection manually.

answered Aug 22 '17 at 05:58

Adam Szmyd

2,765
2
24
32

Ah... Right. it run `this.showForm = false`. Fixed the question. Thanks for the head up. I'll take a look at that reference. If it's work, I'll mark this as an answer. – Firanto Aug 22 '17 at 09:17
I've read the answer. It seems that `NgZone.run()` is more human readable since it was easier to check whether the manual detection is implemented or not. But `ChangeDetectorRef.detectChanges()` is simpler since we only need to add one line. So, on the side note, which one is better? `NgZone.run(callback)` or `ChangeDetectorRef.detectChanges()`? – Firanto Aug 22 '17 at 09:27
I would say `ChangeDetectorRef.detectChanges()` as its a change only in this component (internal state variable). But before You make manual detection, please make sure it wont work out of the box with proper `showForm` value in the callback – Adam Szmyd Aug 22 '17 at 10:03

Angular: Code execution in lambda does not affect the template

1 Answers1