How to use Ion-segment?

Ionic Framework ionic-v3
1

Just start learning , so can someone please explain to me how can I use ion-segment in this case

  <ion-header>
Travaux à réaliser 
<ion-button slot="end" routerLink="/travail"  mode="ios" >
    <ion-icon slot="icon-only" name="add-circle"></ion-icon>
  </ion-button>
  <!--<div> *ngIf="isAdmin == 'true' || isCl == 'true'"</div>-->

</ion-toolbar>
<!--

HubStruck Notifications

A new message in your network

Oceanic Next has joined your network

10:45 AM 
    <ion-item-options side="start">
      <ion-item-option>
        <ion-icon slot="icon-only" name="build"></ion-icon>
      </ion-item-option>
    </ion-item-options>

    <ion-item-options side="end">
      <ion-item-option color="danger">
        <ion-icon slot="icon-only" name="trash"></ion-icon>
      </ion-item-option>
      <ion-item-option>
        <ion-icon slot="icon-only" name="open"></ion-icon>
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

</ion-list>

–>

    <ion-segment (ionChange)="segmentChanged($event)" >
<ion-segment-button value="Traveaux" mode="ios" >
  <ion-label>Traveaux</ion-label>
</ion-segment-button>
<ion-segment-button value="Demandes"mode="ios">
  <ion-label>Demandes</ion-label>
</ion-segment-button>

   <ion-content>

   <div [ngSwitch]="category"> 
  <div *ngSwitchCase="'Traveaux'">
  <ion-list *ngIf="!jobs.length">
      
    <ion-item *ngFor="let item of [0, 1, 2]">
    <ion-avatar slot="start">
      <ion-skeleton-text animated></ion-skeleton-text>
    </ion-avatar>
    <ion-label>
      <h3>
        <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
      </h3>
      <p>
        <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
      </p>
      <p>
        <ion-skeleton-text animated style="width: 30%"></ion-skeleton-text>
      </p>
    </ion-label>
  </ion-item>
</ion-list>



<ion-list>
  <ion-item-sliding *ngFor="let job of jobs">
    <ion-item button [routerLink]="['/travail', job.id]">
      <ion-avatar slot="start">
        <img [src]="job.picture">
      </ion-avatar>

      <ion-label>
        {{ job.title }}
        <p>{{ job.description }}</p>
        <p>{{ job.createdAt | date: 'short' }}</p>
      </ion-label>

    </ion-item>

<ion-item-option color="danger" (click)="deleteJob(job.id)">
  <ion-icon slot="top" name="trash"></ion-icon>
  Supprimer
     </ion-item-option>

    </ion-item-options>
      </ion-item-sliding>
     </ion-list>
    </div>

              <div *ngSwitchCase="'Demandes'">

              <ion-list >
          <ion-item>
          </ion-item>
       </ion-list>
      </div>
   </div>
  </ion-content>

and what should I add in component.ts