Can see [hidden] component for short time on page loading


On a page, I have some items that will be hidden depending of the data that will be retrieved from a SQlite database.

Right now, when the page loads I see my hidden items for a really short moment and disappear when the condition is reached.

How can I make sure that when the page loads, everything that should be hidden does not show up? I think there was something in angular 1 called “cloak” or something similar, no?

The [hidden] condition is waiting from something on my SQlite database, so I need that platform to be ready (this.platform.ready().then()).

I tried to put that code inside the constructor. Did not work.

I tried in the onPageWillEnter(). Did not work

I tried in the onPageLoaded(). Did not work.

What else can I try?


This seems to be a Catch-22. Can you rewrite the [hidden] condition so that it defaults to truthy before the platform is ready? Something like [hidden]="!platformIsReady || platformDependentCondition"?


Right now, my 2 [hidden] condition are based on a “data.lenght”, so how would you write the new condition? I need to add thee !platformIsReady also?

<ion-card [hidden]=“data.lenght”>

<ion-card [hidden]="!data.lenght">

“based on” isn’t enough information to really give a good answer.

You have to ensure that the [hidden] condition evaluates to true from the start, just as @rapropos suggested.

This can be when the platform is ready or some data is loaded, i.e.:

// test.ts
// ...
export class TestPage {
  isPlatformReady: boolean = false;
  isDataLoaded: boolean = false;
  // TODO: Use real conditions instead of this one:
  showMessages: boolean = true;
  constructor(platform: Platform, dataProvider: DataProvider) {
    platform.ready().then(() => this.isPlatformReady = true);
    dataProvider.load().then((data) => this.isDataLoaded = (data && data.length > 0));
  // ...
<!-- Won't be shown until the platform is ready. -->
<div [hidden]="!isPlatformReady || !showMessages">Platform is ready!</div>
<!-- Won't be shown until the data is loaded. -->
<div [hidden]="!isDataLoaded || !showMessages">Data is loaded!</div>

The point is to hide the items by default until the required data is loaded and you can update the other conditions as needed.

Understood and working great.

Thanks both of you!