# Hide and Show dynamically segments

**URL:** <https://forum.ionicframework.com/t/hide-and-show-dynamically-segments/103474>\
**Category:** ionic-v3\
**Created:** [August 28, 2017, 3:01pm UTC](https://forum.ionicframework.com/t/hide-and-show-dynamically-segments/103474 "2017-08-28T15:01:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mburger81](https://avatars.discourse-cdn.com/v4/letter/m/bc8723/32.png) [@mburger81](https://forum.ionicframework.com/u/mburger81)\
**Post date:** [August 28, 2017, 3:01pm UTC](https://forum.ionicframework.com/t/hide-and-show-dynamically-segments/103474/1 "2017-08-28T15:01:31Z")

</div>

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

```auto
<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`

---

<div class="post-metadata">

**Author:** ![rodrigoguariento](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rodrigoguariento/32/120378_2.png) [@rodrigoguariento](https://forum.ionicframework.com/u/rodrigoguariento)\
**Post date:** [September 20, 2018, 1:27pm UTC](https://forum.ionicframework.com/t/hide-and-show-dynamically-segments/103474/2 "2018-09-20T13:27:33Z")

</div>

Here is working fine:

```auto
<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:

```auto
{{ 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.