Segment

Improve this doc

A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls. Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app. You could use Angular 2's ngModel or FormBuilder API. For an overview on how FormBuilder works, checkout Angular 2 Forms, or Angular FormBuilder

Directive

selector: ion-segment

Usage

<ion-segment [(ngModel)]="relationship" (change)="onSegmentChanged($event)" danger>
  <ion-segment-button value="friends">
    Friends
  </ion-segment-button>
  <ion-segment-button value="enemies">
    Enemies
  </ion-segment-button>
</ion-segment>

Or with FormBuilder

<form [ngFormModel]="myForm">
  <ion-segment ngControl="mapStyle" danger>
    <ion-segment-button value="standard">
      Standard
    </ion-segment-button>
    <ion-segment-button value="hybrid">
      Hybrid
    </ion-segment-button>
    <ion-segment-button value="sat">
      Satellite
    </ion-segment-button>
  </ion-segment>
</form>

Output Events

Attr Details
change

expression to evaluate when a segment button has been changed

Related

Segment Component Docs, Angular 2 Forms

API

Native

General