Ionic 4 Beta: what it means if your Ionic component is not “hydrated” (visibility: hidden rather than visibility: inherit)

Since documentation and StackOverflow answers are currently sparse for Ionic 4, this tip may hopefully help you save a lot of time debugging if you are transitioning a project from Ionic 3 to Ionic 4.

If you discover one of your components is missing the “hydrated” class, a class programmatically applied to Ionic 4 components at run-time (your component’s DOM element will have visibility: hidden), check your component’s HTML markup!

Likely there is something missing or erroneous in that particular component¬†or any nested component within that doesn’t conform exactly to the schema described in the Ionic 4 documentation.

For example, not specifying a correct property value for the side attribute:


<ion-list>
  <ion-item-sliding>
    <ion-item>
       ...
    </ion-item>
    <ion-item-options side="right"> <!-- should be side="end" -->
      <ion-item-option (click)="foo()">
        <ion-icon name="quote" slot="top"></ion-icon>
        <ion-label slot="bottom">...</ion-label>
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

This results in a run-time DOM tree that looks like the following (note that ion-list is not “hydrated”, which bubbles up from the unhydrated ion-item-options due to its bad side attribute value):


<ion-list _ngcontent-c5 class="list list-md">
  <ion-item-sliding _ngcontent-c5 class>
    <ion-item _ngcontent-c5 class="in-list item hydrated">
       ...
    </ion-item>
    <ion-item-options _ngcontent-c5 side="right" ng-reflect-side="right"> <!-- notice how this is not hydrated and bubbles up to ion-list not being hydrated -->
      <ion-item-option (click)="foobar()" color="primary" ng-reflect-color="primary">
        <ion-icon _ngcontent-c5 name="quote" slot="top" ng-reflect-name="quote" role="img" class="hydrated" aria-label="quote"></ion-icon>
        <ion-label _ngcontent-c5 slot="bottom" class="sc-ion-label-md-h sc-ion-label-md-s hydrated">...</ion-label>
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

0 thoughts on “Ionic 4 Beta: what it means if your Ionic component is not “hydrated” (visibility: hidden rather than visibility: inherit)”

Leave a Reply

Your email address will not be published. Required fields are marked *