NativeScript cannot get or set UI properties when page loaded

Question

I am building an app using NativeScript Angular. I need to get or set properties of UI components when the page is loaded. However, ngOnInit, ngAfterViewInit, or (onloaded) don't seem to work.

I created a NativeScript program to demonstrate this problem. This program has two pages, and each page has two labels stacked vertically. When I press the upper labels on each page, the program loads the other page. In the console, it prints out the width of the label (label.getActualSize().width). I can see the width of the labels no problems when I switch to the other page. The value I get is 270. However, what I want is to see the width printed out in the console when I load the page.

I tried ngAfterViewInit() and (loaded) from my .html file, but they don't seem to work. It gives me 0. My guess is that I get this value because NativeScript gives me the width value before all the component is loaded. I need to fix this problem.

Here is my code for page_2.component.ts, in which contains the main testing part:

import {Component, ViewChild, ElementRef, OnInit} from "@angular/core";
import {Router} from "@angular/router-deprecated";

import {Page} from "ui/page";

import {Label} from "ui/label";

@Component({
    selector: "page2",
    templateUrl: "pages/page_2/page_2.html",
    styleUrls: ["pages/page_2/page_2-common.css", "pages/page_2/page_2.css"]
})

export class Page2 implements OnInit {

    @ViewChild("label_in_2") label_in_2: ElementRef;

    constructor(private _router: Router, private page: Page) {}

    ngOnInit() {

    }

    ngAfterViewInit() {
        let label = <Label>this.label_in_2.nativeElement;

        console.log("width of the label 2 in ngAfterViewInit: " + label.getActualSize().width); // this gives me 0.
    }

    whatisthewidth(testLabel) {
        // let test = testLabel.nativeElement;

        // testLabel.

        console.log("width of the label 2 in whatisthewidth: " + testLabel.getActualSize().width); // this gives me 0.
    }

    to_page1() {
        let label = <Label>this.label_in_2.nativeElement;

        console.log("width of the label 2: " + label.getActualSize().width); // this gives me 270.

        console.log("to page 1");
        this._router.navigate(["Page1"]);
    }

}

For the sake of completeness, let me attach other parts of the program.

main.ts

import {nativeScriptBootstrap} from "nativescript-angular/application";
import {AppComponent} from "./app.component";

nativeScriptBootstrap(AppComponent);

app.component.ts

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

import {HTTP_PROVIDERS} from "@angular/http";
import {RouteConfig} from "@angular/router-deprecated";
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";

import {Page1} from "./pages/page_1/page_1.component";
import {Page2} from "./pages/page_2/page_2.component";

@Component({
    selector: "main",
    directives: [NS_ROUTER_DIRECTIVES],
    providers: [NS_ROUTER_PROVIDERS, HTTP_PROVIDERS],
    template: "<page-router-outlet></page-router-outlet>"
})
@RouteConfig([
    { path: "/Page1", component: Page1, name: "Page1" },
    { path: "/Page2", component: Page2, name: "Page2", useAsDefault: true }
])

export class AppComponent { }

app.css

button, label, stack-layout {
    horizontal-align: center;    
}

button {
    font-size: 36;
}

.title {
    font-size: 30;
    margin: 20;
}

.message {
    font-size: 20;
    color: #284848;
    text-align: center;
    margin: 0 20;
} 

.button_label {
    background-color: gray;

    width: 75%;
    height: 25%;
}

page_1.component.ts

import {Component, ViewChild, ElementRef, OnInit} from "@angular/core";
import {Router} from "@angular/router-deprecated";

import {Page} from "ui/page";

import {Label} from "ui/label";

@Component({
    selector: "page1",
    templateUrl: "pages/page_1/page_1.html",
    styleUrls: ["pages/page_1/page_1-common.css", "pages/page_1/page_1.css"]
})

export class Page1 {

    @ViewChild("label_in_1") label_in_1: ElementRef;

    constructor(private _router: Router, private page: Page) {}

    to_page2() {
        let label = <Label>this.label_in_1.nativeElement;

        console.log("width of the label 1: " + label.getActualSize().width);

        console.log("to page 2");
        this._router.navigate(["Page2"]);
    }

}

page_1.html

<StackLayout>
    <Label text="to page 2" class="button_label" (tap)="to_page2()"></Label>
    <Label #label_in_1 text="second label" class="test_label"></Label>
</StackLayout>

page_1-common.css

Label.test_label {
    background-color: blue;

    width: 75%;
    height: 20%;
}

page_2.html

<StackLayout>
    <Label text="to page 1" class="button_label" (tap)="to_page1()"></Label>
    <Label #label_in_2 text="second label" class="test_label" (loaded)="whatisthewidth(label_in_2)"></Label>
</StackLayout>

page_2.common.css

Label.test_label {
    background-color: yellow;

    width: 75%;
    height: 20%;
}

Any advices or insights would be appreciated.

Answer 1

I don't know how the issue on Github is considered closed by a workaround while the issue is still exist. The timeout solution is only to wait until the DOM get loaded, which can be more time if loaded from a templateURL, so no time to be added.

Answer 2

I think this question is related with this Github issue