nativescript(Angular) - routing inside firebase event listener

Question

In nativescript(Angular), I'm using (nativescript-angular/router) and (nativescript-plugin-firebase)

when i write the code like that(the order page var binding not working):

firebase.addValueEventListener(result => {
    this.router.navigate(['/order'], { clearHistory:true });
}, path);

and this is the simulator image of the order page when the code is inside the listener

but when the routing code is outside of the event listener it works

this.router.navigate(['/order'], { clearHistory:true });
firebase.addValueEventListener(result => {}, path);

and this when the code is outside... the var value shows in the template perfectly fine

this is the template code order.html

<Label [text]="test"></Label>

and this is order.component.ts

export class OrderComponent  {
  public test = "test var value";
}

Nick Iliev Nick Iliev · Accepted Answer · 2017-11-07T12:44:35

Wrap the navigation inside an Angular zoned callback.

import { Component, NgZone } from "@angular/core";

...

constructor(private zone: NgZone) {
}

firebase.addValueEventListener(result => {
     this.zone.run(() => {
         this.router.navigate(['/order'], { clearHistory:true });
     ])
}, path)

nativescript(Angular) - routing inside firebase event listener

1 Answers