bug: mode property not working for <ion-segment>

[andreas-aeschlimann]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
The property mode is not working for the ion-segment html tag. It somehow edits only the color instead of the layout.
Setting mode="ios" does not show the iOS segment in a browser. Setting mode="android" does not show the Android segment on an iOS device.

Expected behavior:
Change the layout of the segment menu depending on the mode property.

Steps to reproduce:
Sample code below, just the default example from the website.

Related code:
https://stackblitz.com/edit/ionic-v4-angular-tabs-opknlw

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.9.1
   @angular-devkit/build-angular : 0.803.6
   @angular-devkit/schematics    : 8.3.6
   @angular/cli                  : 8.3.6
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.2.1
   @capacitor/core : 1.2.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 

System:

   ios-deploy : 1.9.2
   ios-sim    : 8.0.1
   NodeJS     : v10.16.0 (/usr/local/bin/node)
   npm        : 6.11.2
   OS         : macOS Mojave
   Xcode      : Xcode 11.0 Build version 11A420a

[brandyscarney]

Thanks for the issue! In the latest release the segment buttons require mode as well since they are individual components. However, in the next major release we will be passing the mode down to the segment buttons. See this PR: #19369

[andreas-aeschlimann]

I see, thank you for your info.

However, I don't understand why <ion-segment [mode]="'md'"> does not work, while <ion-segment mode="md"> works? I actually thought this was an equivalent notation.

[brandyscarney]

@andreas-aeschlimann Unfortunately I can't ever get Stackblitz working properly for me but when testing it out in the conference app using 4.10.0 I am seeing mode work properly both ways:

<ion-header>
  <ion-toolbar>
    <ion-segment [mode]="'md'">
      <ion-segment-button>Button</ion-segment-button>
      <ion-segment-button>Button</ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

[andreas-aeschlimann]

Don't forget to set the mode in the segment button, too. ;) The screenshot you are showing has the iOS mode while you tried to set MD mode.

The [mode] vs mode is weird though, because on iPhone Simulator it didn't work within my app. Using Stackblitz, I see it working as you mentioned.

[brandyscarney]

I was just showing that the ion-segment itself is getting the correct mode. You can see it as the ng-reflect-mode attribute. In order to get the same mode in the ion-segment-button yes it would need to be set as well. It may be an issue with setting dynamic mode. We don't allow dynamic modes to be set as it can only get the proper mode on the first load.

[andreas-aeschlimann]

That's possible, yes.

Thanks and I will follow the PR and hope it will be merged soon!

[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.