Nativescript UI loaded

Question

I am using Angular with Nativescript.

I want to show a loading indicator on a new page until everything is loaded. I am now setting the isLoading property to true in class' constructor and setting it to false when

.subscribe(res => isLoading = false);

The thing is: the api call is fast, so this barely shows up, but the UI rendering takes a while. Up to 3 seconds on slower devices. The page is a grid (timetable) of 24*20 cells.

How do I set the isLoading property to false after everything is loaded and displayed?

Answer 1

With your scenario probably all Angular lifecycles events will be executed before the actual UI component (in this case the GridLayout) is loaded. Try using the NativeScript lifecycle evetns e.g. loaded

<GridLayout (loaded)="onGridLoaded($event)'
</GridLayout>


public onGridLoaded(args: EventData) {
 var grid = args.object;
}