Binding value didn't update after asynchronous change

[montylab]

I'm submitting a

[x] bug report => search github for a similar issue or PR before submitting

I saw similar issue here: #7381
But it doesn't helped me, since current angular version isn't using babel

Current behavior
After asynchronous function is called, variable changes to true, but *ngIf doesn't showing up the item
After 5-30 seconds it detect variable change and showing item

Expected behavior
After asynchronous function is called, variable changes to true => *ngIf should showing up the item instantly

Minimal reproduction of the problem with instructions

https://angular-binding-bug.firebaseapp.com/ - demo

1. open console
2. try to sign in using google
3. see that username doesn't appear, but console output showed correct results

https://github.com/montylab/angular2_cd_bug

<li *ngIf="isAuth" class="user"> 
    {{username}}
...

LI doesn't showing up after isAuth changed to true

this.authService.onAuthStateChange.subscribe((isAuth) => {
	this.username = this.authService.getUsername();
	this.isAuth = isAuth;
	console.log('fires subject - ', 'isAuth: ' + isAuth, 'name: '+ this.username);
	console.log('context: ', this);
});

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Windows 10, PHP Storm, npm, ng cli serve

• Angular version: 4.0.3

• Browser: Chrome (sometimes it works, try incognito mode), probably all.

• Language: Typescript 2.2.0

[vicb]

Observable subscriptions are not executed in the Angular zone, please try:

this.authService.onAuthStateChange.subscribe((isAuth) => ngZone.run((isAuth) => {
  // your original code
}));

[montylab]

Hi @vicb, thanks for reply

I know about solution with ngZine.run, but for me it looks like overkill.
I've also tried EventEmitter instead of Observable, it doesn't work too.

emitter = new EventEmitter<boolean>();

...

this.emitter.emit(!!user);

this.authService.emitter.subscribe((isAuth) => {
    this.username = this.authService.getUsername();
    this.isAuth = isAuth;
        console.log('fires emitter - ', 'isAuth: ' + isAuth, 'name: '+ this.username);
        console.log('context: ', this);
});

Also I want to notice, that I use the same idea with Rx/Subject in another place, it works as expected

onRoomsUpdate = new Subject<Room[]>();
...

this.rooms = this.roomsService.getRooms();    // get rooms synchronously

this.roomsService.onRoomsUpdate.subscribe((rooms: Room[])=> {   
    this.rooms = rooms;    // update rooms when they were changed
})

Can you please clarify why it happens?
I want to understand behavior of these two cases and what is the difference between them.

Thank you,
Eduard

[tytskyi]

@montylab i guess it's because you emit new value inside of firebase.auth() callback - which knows nothing about the angular zone

[Klinton90]

I'm facing same problem. Have to call ChangeDetectorRef.detectChanges() from most backend requests/subscriptions.

Same code was working fine until update to v4+.

[montylab]

Thank you all, I'll close the ticket

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}