In this tutorial, we can learn how to implement segment button in ionic
Download Source code:
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
andion-segment-button
. ion-segment
has[(ngModel)]="selectTabs"
& Eachion-segment-button
contains value.- When user selected/clicked button we're displaying
div
based onselectTabs
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(
) { }
}