Ionic 4 Segment Live Example

Segments are a collection of related buttons that displayed in a horizontal row. The functionality of the Ionic segment is the same as Ionic tabs, where you select the one tab that will deselect all other tabs.

HTML

  <ion-segment [(ngModel)]="boxes">
    <ion-segment-button value="box1">
      Box 1
    </ion-segment-button>
    <ion-segment-button value="box2">
      Box 2
    </ion-segment-button>

  </ion-segment>

 <div [ngSwitch]="boxes">

    <div *ngSwitchCase="'box1'">

      <h1>Box 1</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia quos possimus nam facilis, atque asperiores sint modi, odit quaerat, maxime voluptatibus velit neque placeat aut repellendus! Voluptate soluta quam eligendi.</p>

    </div>



    <div *ngSwitchCase="'box2'">
      <h1>Box 2</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia quos possimus nam facilis, atque asperiores sint modi, odit quaerat, maxime voluptatibus velit neque placeat aut repellendus! Voluptate soluta quam eligendi.</p>

    </div>


  </div>

T.S. File

 boxes: string = "box1";

Result