Ionic Segment Tutorial

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

Download Source code:

Download

home.page.html

<span class="hljs-tag"><<span class="hljs-name">ion-header</span> [<span class="hljs-attr">translucent</span>]=<span class="hljs-string">"true"</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">ion-toolbar</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-title</span>></span>
      Codesundar.com
    <span class="hljs-tag"></<span class="hljs-name">ion-title</span>></span>
  <span class="hljs-tag"></<span class="hljs-name">ion-toolbar</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-header</span>></span>

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

  <span class="hljs-tag"><<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">"selectTabs == 'recent'"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Recent<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
  <span class="hljs-tag"></<span class="hljs-name">div</span>></span>

  <span class="hljs-tag"><<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">"selectTabs == 'missed'"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Missed<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
  <span class="hljs-tag"></<span class="hljs-name">div</span>></span>

  <span class="hljs-tag"><<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">"selectTabs == 'contact'"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Contact<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
  <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-content</span>></span>

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

<span class="hljs-keyword">import</span> { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>;

@Component({
  <span class="hljs-attr">selector</span>: <span class="hljs-string">'app-home'</span>,
  <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">'home.page.html'</span>,
  <span class="hljs-attr">styleUrls</span>: [<span class="hljs-string">'home.page.scss'</span>],
})
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HomePage</span> </span>{
  selectTabs = <span class="hljs-string">'recent'</span>;
  <span class="hljs-keyword">constructor</span>(
  ) { }
}

Download