bug:

[Jesspu]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Angular Version: 17.2.4
Ionic Type: angular-standalone
Issues shows on: ios, android, and browser

When you set the mode on ion-router-outlet, it will override the platform style mode on all conditionally rendered ionic components (components that are rendered in an @if, *ngIf, @for, *ngFor). So, if you have <ion-router-outlet mode="md"></ion-router-outlet>, and then on a page have @if(true){<ion-select></ion-select>}, the ion-select will use the md platform style, even when running on an ios device.

Expected Behavior

The mode of the ion-router-outlet should have no effect on the platform style mode of conditionally rendered components (or any components rendered inside it), and should only modify its own behavior.

Steps to Reproduce

1. Pull down repo https://github.com/Jesspu/ionic-platform-styles-bug
2. From the root of the project, run npm install
3. The run npm run start
4. Open the served page at http://localhost:4200/home
5. In chrome dev tools, set it to mobile phone view, and select an iphone, and refresh the page. The app should now be using ios platform styles. Or build the app for capacitor and run it on an ios simulator or device.
6. Wait for the second ion-select to conditionally render (1 second).
7. Notice it is using md platform styles
8. Go into the projects app.components.html file, and remove the mode property from the ion-router-outlet
9. The second ion-select now correctly uses the ios platform styles.

Code Reproduction URL

https://github.com/Jesspu/ionic-platform-styles-bug

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/patmj/.volta/tools/image/packages/@ionic/cli/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.8.3
@angular-devkit/build-angular : 17.3.3
@angular-devkit/schematics : 17.3.3
@angular/cli : 17.2.3
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 5.7.4
@capacitor/android : not installed
@capacitor/core : 5.7.4
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.9.0 (/Users/patmj/.volta/tools/image/node/20.9.0/bin/node)
npm : 10.1.0
OS : macOS Unknown

Additional Information

No response

[Saqib92]

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.

[Jesspu]

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.

[Jesspu]

Any updates on this?

[liamdebeasi]

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.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.