Get the height of a generated view - nativescript

Question

I'm trying to get the height of a StackLayout. This layout is filled with data from my backend, so it's not always the same height. I tried view.getViewById(parent, selector).effectiveHeight, but it keeps outputting 0.
My XML file looks a bit like this:
<Page>
<ActionBar title="..."></ActionBar>
<GridLayout rows="*, auto" columns="*">
<ScrollView row="0" col="0">
<GridLayout rows="*" columns="*">
<StackLayout id="TARGET" row="0" col="1">
<StackLayout *ngFor="let x of y">
<FlexboxLayout justifyContent="space-between">
<FlexboxLayout>
<StackLayout>
...
</StackLayout>
</FlexboxLayout>
<FlexboxLayout justifyContent="space-between">
...
</FlexboxLayout>
</FlexboxLayout>
</StackLayout>
</StackLayout>
<StackLayout col="0" row="0">
...
</StackLayout>
</GridLayout>
</ScrollView>
<StackLayout row="1" col="0">
...
</StackLayout>
</GridLayout>
</Page>
Thank you in advance!

Answer 1

if you are using view.getViewById(parent, selector).effectiveHeight it will only work if view is rendered and loaded. even if you are trying to get values on loaded() event it will be 0 because of nativescript bug.
To workaround this case I would suggest setting up timeout with 200 milliseconds.
for example
home.component.html
<ListView [items]="a" class="list-group">
<ng-template let-country="item" let-i="index" let-odd="odd" let-even="even">
<WrapLayout width="100%" orientation="horizontal" backgroundColor="palegreen">
<StackLayout #abc (loaded)="getSize($event)" width="20%" [height]="testWidth" backgroundColor="lightgray">
<Label [text]="'W'+testWidth" backgroundColor="red"></Label>
<Label text="LA" backgroundColor="green"></Label>
</StackLayout>
</WrapLayout>
</ng-template>
</ListView>
home.component.ts
import { Component, OnInit, ViewChild } from "#angular/core";
import { PercentLength } from "tns-core-modules/ui/styling/style-properties"
import { StackLayout } from "ui/layouts/stack-layout"
#Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html",
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
a = ['1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2', '1', '2',]
#ViewChild('abc') abc;
testWidth = 0;
constructor() {
}
getSize(args) {
setTimeout(() => {
let stack= <StackLayout>args.object;
var stackSize = args.object.getActualSize();
var stackWidth = stackSize.width;
var stackHeight = stackSize.height;
console.log("stackWidth: " + stackWidth);
console.log("stackHeight: " + stackHeight);
this.testWidth = stackWidth;
}, 200);
}
ngOnInit(): void {
}
toDevicePixels(percentage: PercentLength) {
console.dir(PercentLength.convertToString(percentage))
return PercentLength.toDevicePixels(percentage,0,0);
}
}
The code sample also shows, how to get the height and width of the StackLayout dynamically and bind them to view.

Answer 2

Use .getMeasuredHeight() once the view is loaded.
Source: https://docs.nativescript.org/api-reference/classes/_ui_core_view_.view#getmeasuredheight