Ion-segment doesn't change my content

Ionic Framework ionic-v3
1

Hello everyone,
ionic v6
angular v11

I have this code:

<ion-content>
  <ion-segment (ionChange)="segmentChanged($event)" value="list">
    <ion-segment-button value="list">
      <ion-label>
        List
      </ion-label>
    </ion-segment-button>
    <ion-segment-button value="card">
      <ion-label>
        Card
      </ion-label>
    </ion-segment-button>
  </ion-segment>
  <ion-list class="animate__animated animate__slideInUp animate__fast" *ngIf="segment === 'list'">
    <ion-item *ngFor="let item of arr; let index = index">
      <ion-label>Item {{ index + 1 }}</ion-label>
    </ion-item>
  </ion-list>
  <div class="animate__animated animate__slideInUp animate__fast" *ngIf="segment === 'card'">
    <ion-card *ngFor="let item of arr; let index = index">
      <ion-card-content>
        <h2>Card {{ index + 1 }}</h2>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

When I emulate this code on android studio, and I change my current segment to another one, nothing happened…
My content does’nt change.

DO you know why?

2

I too have a segment that changes two parts of my page visible. In the Component, I have this code to change a boolean value that I use in the view for the *ngIf

 <ion-segment (ionChange)="segmentChanged($event)" value="dashboard">
    <ion-segment-button value="dashboard">
      <ion-label>Dashboard</ion-label>
    </ion-segment-button>
    <ion-segment-button value="details">
      <ion-label>Details</ion-label>
    </ion-segment-button>
  </ion-segment>

<ion-grid *ngIf="segmentOption"> .....

segmentOption = true;

 segmentChanged(ev: any) {
    if (ev.detail.value === 'dashboard') {
      this.segmentOption = true;
    } else {
      this.segmentOption = false;
    }
  }

Hope that helps

3

Finally I added a changeDetector from angular

1 Like
4

Don’t forget about using a local reference to the ion-segment, like this:

    <ion-segment value="dashboard" #segment>
      <ion-segment-button value="dashboard">
        <ion-label>Dashboard</ion-label>
      </ion-segment-button>
      <ion-segment-button value="details">
        <ion-label>Details</ion-label>
      </ion-segment-button>
    </ion-segment>

    <ion-grid *ngIf="segment.value === 'dashboard'">

This would eliminate the need to reach into your typescript file.