Data binding problem using navigatedTo event

nativescriptcore
databinding

#1

Hello,

I’m new to NativeScript/Angular 2+ development and I have a problem with data binding and the ui.Page feature.
I made a simple two pages example to explain :

  • a first page which displays a “request” button which triggers a dummy request, a “search” button which allows to access the second page and a boolean to display if request is pending
  • a second page which displays nothing except a back button (ActionBar).

When I press the “request” button on the first page, boolean is correctly set to true during request and finally set to false when request is done.

The problem occurs when I come back to the first page from the second one (after clicking on the “search button”). I use page’s navigatedTo event to trigger the request. The boolean value is set to true on start but never comes back to false.

Here is the first page typescript file :

import { Component, OnInit} from "@angular/core";
import { Router } from "@angular/router";

import { Page } from "ui/page";
import { TestService } from "../../shared/prices/test.service"

@Component({
    selector: "home",
    providers: [],
    templateUrl: "./pages/home/home.html",    
    styleUrls: ["pages/home/home-common.css", "pages/home/home.css"]
})
export class HomeComponent implements OnInit{

    public isLoading = false;
    constructor(private router: Router, private page: Page, private testService: TestService) {
        this.page.on("navigatedTo", () => {
            this.triggerRequest(); 
        });
    }
    
    ngOnInit() {
        this.triggerRequest();
    }

    triggerRequest(){
        this.isLoading = true;
        this.testService.load()
            .subscribe(() => {
                console.log("loaded");
                this.isLoading = false;          
            });
    }

    openSearch(){
        this.router.navigate(["/search"]);
    }
}

Here is the first page html file :

<GridLayout>
    <ActionBar title="Tests">
        <ActionItem text="Search" (tap)="openSearch()" android.systemIcon="ic_menu_btn_search" ios.systemIcon="12" ios.position="right"></ActionItem>
        <ActionItem text="Request" ios.position="left" (tap)="triggerRequest()"></ActionItem>
    </ActionBar>
    <GridLayout>
        <Label [text]="isLoading"></Label>
    </GridLayout>
</GridLayout>

Boolean isLoading is not updated in view when I use page’s navigatedTo event. I don’t understand why, I should miss something but I can’t see what.

Can you help me to figure it out ?

Thank you.


#2

Hello,

Even if there are only a few people using navigateTo event, can you just tell me if it’s a wrong approach or if this should work.
Maybe it’s just a syntax problem and I will continue to digg or maybe I completely missed the correct way to do this kind of stuff and I will need to change the way I did it.

Thank you


#3

Ok let me say first I’m not angular guy. Page events like navigatedTo, loaded …etc are only different in the order the trigger see here. So maybe try to reset isLoading in page loaded event, or also you can take advantage of page navigation with history between the two pages https://docs.nativescript.org/core-concepts/navigation#example-4--how-to-pass-content-between-different-pages


#4

Thank you. The first suggestion didn’t work. I didn’t try the second one, it doesn’t seem an Angular approach.

But I fixed my issue in my two pages example :slight_smile:. I found a similar bug (https://github.com/NativeScript/NativeScript/issues/4136) and I tried to put isLoading’s update outside Angular world. It forced the view to be refreshed.

In my real app, I had to add setTimeout right after initializing isLoading value to true (before the request) and then used ngZone in order to toggle isLoading boolean.

It seems a little hacky, though ;(