Ionic Segment Tutorial

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

Download Source code:

<ion-header [translucent]="true">

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

  <div *ngIf="selectTabs == 'recent'">

  <div *ngIf="selectTabs == 'missed'">

  <div *ngIf="selectTabs == 'contact'">

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

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

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage {
  selectTabs = 'recent';
  ) { }