How to use <ion-segment> with dynamic values

I have values fetched from my REST APIs which need to be shown as multiple categories inside the view. So I am trying to use ion-segment, I managed to fetch the values as segments but I am not able to make them show and hide when I click them. With my code, both of them are not shown when I click any of them.

<ion-segment [(ngModel)]="selectedIdx" color="primary">
        <ion-segment-button (click)="changeMenus(i)" [value]="i" *ngFor="let team of teams; let i = index">

      <div [ngSwitch]="selectedIdx" *ngFor="let team of teams">
          <ion-list *ngSwitchCase="team[i]">

I did it like this…

I took two separate variables category for selected category to check for ngSwitch and categories which is my array that holds my dynamic values.


<ion-content padding>
    <div padding>
        <ion-segment [(ngModel)]="category">
          <ion-segment-button *ngFor="let category of categories" value={{category}} (click)="Check()">
      <div [ngSwitch]="category">
      <div *ngFor="let category of categories">
        <ion-list *ngSwitchCase=category>


categories: any;
category: string;

in the constructor:
this.categories= [“ABC”,“DEF”,“GHI”];
this.category = “”;

the check function just prints the value of the category ngModel

It is working for me I hope it helps!

1 Like

Hi, this indeed works. But the problem is, the selected active segment is not highlighted. How to make the selected active segment becomes highlighted?


I noticed that if I remove the <div [ngSwitch]="category"> and all under it, it does highlight the active segment.

How to fix this? Any workaround?

Assuming you’re using the exact code posted previously, it has bound the segment to the category controller property. Assign a value to that property, and the corresponding segment will become selected.

I have figured out what happened:

In short, when we have another item under a segment, its container overlaps the bottom part of segment, thus the bottom border (which shows active segment) is hidden.