Angular *ngIf updating after clicking on page or alt+tab (refocusing) - html

Question

I have a strange bug on an angular project,these are the fragments of the code
#Injectable()
export class FirebaseMessagingService {
public tokenReceivedEmitter: any = new EventEmitter();
public messageReceivedEmitter: any = new EventEmitter();
constructor(
private angularFireMessaging: AngularFireMessaging) {
this.angularFireMessaging.messaging.subscribe(
(messaging) => {
messaging.onMessage = messaging.onMessage.bind(messaging);
messaging.onTokenRefresh = messaging.onTokenRefresh.bind(messaging);
}
);
}
/**
* request permission for notification from firebase cloud messaging
*
* #param userId userId
*/
requestPermission(userId) {
this.angularFireMessaging.requestToken.subscribe(
(token) => {
this.tokenReceivedEmitter.emit({status: true, result: token});
},
(err) => {
this.tokenReceivedEmitter.emit({status: false, result: err});
}
);
}
/**
* hook method when new notification received in foreground
*/
receiveMessage() {
this.angularFireMessaging.messages.subscribe(
(payload) => {
this.messageReceivedEmitter.emit(payload);
});
}
So this was the firebase messaging service which emit token receiving events and when a push notification is received.
Now in the component
ngOnInit(){
// Subscribing to firebase token receive
this.firebaseTokenSubscription = this.messagingService.tokenReceivedEmitter.subscribe(
(message) => {
if (message.status) {
const token = message.result;
this.sendNotificationToken(token);
} else {
this.snackBar.open(message.result, this.translate.instant('CLOSE')
{duration:3000});
}
}
);
}
And also I have enable/disable button in the component, here are the html parts of that code
<div *ngIf="user && !user.webPushEnabled"
class="user-verification fx-all-100 layout-all-row-wrap">
<div class="fx-gtSm-48 fx-ltMd-100 layout-all-col-nowrap">
<p>{{"EXCHANGE.PROFILE.ENABLE_DISABLE_NOTIFICATION" | translate}}</p>
</div>
<div class="fx-gtSm-48 fx-ltMd-100 offset-gtSm-4 align-all-fxEnd-fxStr">
<button mat-raised-button class="button-auth button-main-shadow"
(click)="updateNotificationStatus(true)">
{{"EXCHANGE.PROFILE.ENABLE_NOTIFICATIONS_BUTTON" | translate}}
</button>
</div>
</div>
<div *ngIf="user && user.webPushEnabled"
class="user-verification fx-all-100 layout-all-row-wrap">
<div class="fx-gtSm-48 fx-ltMd-100 layout-all-col-nowrap">
<p>{{"EXCHANGE.PROFILE.ENABLE_DISABLE_NOTIFICATION" | translate}}</p>
</div>
<div class="fx-gtSm-48 fx-ltMd-100 offset-gtSm-4 align-all-fxEnd-fxStr">
<button mat-raised-button class="del-api-key-btn button-main-shadow"
(click)="updateNotificationStatus(false)">
{{"EXCHANGE.PROFILE.DISABLE_NOTIFICATIONS_BUTTON" | translate}}
</button>
</div>
</div>
And obviously I have
updateNotificationStatus(on: boolean) {
if (on) {
this.messagingService.requestPermission(this.user.userId);
} else {
this.userService.updateNotificationStatus(null, false).subscribe(
(result) => {
this.user.webPushEnabled = false;
},
(error) => {
this.snackBar.open(error, this.translate.instant('CLOSE'), {duration: 3000});
}
);
}
}
sendNotificationToken(token) {
this.userService.updateNotificationStatus(token, true).subscribe(
(result) => {
debugger;
this.user.webPushEnabled = true;
},
(error) => {
this.snackBar.open(error, this.translate.instant('CLOSE'), {duration: 3000});
}
);
}
The problem is that when I enable push notifications it only updates html when page is reloaded or refocused(alt+tab or clicking on page with mouse). It also works fine when webpage is loaded at first time.
Pleas help any suggestions or ideas may help.

Answer 1

The problem was that firebase was requesting user token outside Angular's view thread, so I had to update the model in angular's view thread.
this.ngZone.run(() =>{
this.user.webPushEnabled = true;
})
It helped me out.