Ionic Segment Tutorial

In this tutorial, we can learn how to implement segment button in ionic

Download Source code:

Download

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Codesundar.com
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-segment [(ngModel)]="selectTabs">
    <ion-segment-button value="recent">
      <ion-label>Recents</ion-label>
    </ion-segment-button>
    <ion-segment-button value="missed">
      <ion-label>Missed</ion-label>
    </ion-segment-button>
    <ion-segment-button value="contact">
      <ion-icon name="person-circle-outline"></ion-icon>
      <ion-label>Contact</ion-label>
    </ion-segment-button>
  </ion-segment>

  <div *ngIf="selectTabs == 'recent'">
    <h3>Recent</h3>
  </div>

  <div *ngIf="selectTabs == 'missed'">
    <h3>Missed</h3>
  </div>

  <div *ngIf="selectTabs == 'contact'">
    <h3>Contact</h3>
  </div>
</ion-content>

Code Explanation:

• We have created ionic segement button using ion-segment and ion-segment-button.
• ion-segment has [(ngModel)]="selectTabs" & Each ion-segment-button contains value.
• When user selected/clicked button we're displaying div based on selectTabs value

home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  selectTabs = 'recent';
  constructor(
  ) { }
}

Download