bug: about ionic-framework HOT 4 CLOSED

As per documentation this is intended result.
The mode determines which platform styles to use.

remove mode from router-outliet and it will work as intended.

from ionic-framework.

Maybe I didn't explain the issue well enough.

It is only applying the mode set on the ion-router-outlet to conditionally rendered components (things rendered inside an @if,*ngIf,@for,*ngFor...). Not all the components.

So the expected behavior is that it would either

1. apply the mode set on the ion-router-outlet to all components, or
2. none and only the ion-router-outlet itself.

Example.

If the md mode is set on the ion-router-outlet, and you have two ion-selects. One ion-select is inside an *ngIf directive and you are running your app on an iphone. The ion-select NOT in the *ngIf will be using mode ios, the one inside the *ngIf will be using mode md. I replicated this in the repo attached to the issue.

from ionic-framework.

Any updates on this?

from ionic-framework.

Apologies for the delay. I can confirm that this is fixed in Ionic 8.

In previous versions of Ionic, your page component was initially mounted as a sibling of ion-router-outlet and was later moved to be a child of it. When the page component is initially mounted, Ionic does not consider the mode set on the RouterOutlet (since it's not an ancestor at the time) when trying to determine the Item's mode.

By the time the delayed Item in your demo was added, the page component had already been moved to be a child of the RouterOutlet, so now Ionic does consider the mode set on that component.

In Ionic 8 we fixed this so the page component is always mounted as a child of the RouterOutlet initially, so no moving is needed.

from ionic-framework.