Hide and Show dynamically segments

Ionic Framework ionic-v3
1

We have two or more segments and we would hide and show dynamically this segments depending on property, something like that

<ion-segment [(ngModel)]="connectionType" (ionChange)="segmentChanged($event)">
    <ion-segment-button value="local" *ngIf="showFirstSegment">
        First segment
    </ion-segment-button>
    <ion-segment-button value="local" *ngIf="showSecondSegment">
        Second segment
    </ion-segment-button>
    <ion-segment-button value="local" *ngIf="showThirdSegment">            
        Third segment
    </ion-segment-button>
    <ion-segment-button value="local" *ngIf="showFourthSegment">
        Fourth segment
    </ion-segment-button>
</ion-segment>

The segment is not changing on changing properties showXXXXXSegment, only after click on some part of the segment the segment is re rendered with the right segments shown. I also tried to use hidden instead of ngIf

2

Here is working fine:

<ion-header>
  <ion-navbar>
    <ion-title>Customer</ion-title>
  </ion-navbar>
  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="s">
      <ion-segment-button value="t1">Tab 1</ion-segment-button>
      <ion-segment-button value="t2" *ngIf="e">Tab 2</ion-segment-button>
      <ion-segment-button value="t3" *ngIf="e == true">Tab 3</ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

Check the value of the variables, eg:

{{ showFirstSegment ? 'showFirstSegment value is true' : 'showFirstSegment value is false' }}

Other thing that you can do is stop “ionic serve”, delete “www” directory, and re-run “ionic serve”. Maybe it solve your problem.