How to use a default value to model a segment in ionic 2?

Question

How to use a default value to model a segment in ionic 2?

Navigation

#1 by (0 votes)

0

I'm using the segment example from the ionic documentation. in the example there are two *ngSwitchCase that are these *ngSwitchCase="'puppies'" and *ngSwitchCase="'kittens'" , what I want to achieve is that by default the value is puppies.

<div padding>
  <ion-segment [(ngModel)]="pet">
    <ion-segment-button value="kittens">
      Kittens
    </ion-segment-button>
    <ion-segment-button value="puppies">
      Puppies
    </ion-segment-button>
  </ion-segment>
</div>

<div [ngSwitch]="pet">
  <ion-list *ngSwitchCase="'puppies'">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="img/thumbnail-puppy-1.jpg">
      </ion-thumbnail>
      <h2>Ruby</h2>
    </ion-item>
    ...
  </ion-list>

  <ion-list *ngSwitchCase="'kittens'">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="img/thumbnail-kitten-1.jpg">
      </ion-thumbnail>
      <h2>Luna</h2>
    </ion-item>
    ...
  </ion-list>
</div>

angularjs ionic angularjs-2.0 ionic2

asked by Daniel Enrique Rodriguez Caste 26.06.2017 в 07:00

source

1 answer

Conditional pull-down menu Any way to expedite these datepickers?

score 0 · Accepted Answer

Since the variable used to determine the visible segment is pet ( <ion-segment [(ngModel)]="pet">...</ion-segment> ) to show by default the section of puppies the only thing you have to do is assign this value to the variable in the component of the page:

constructor(...) {
  this.pet = 'puppies';
}

That way, that segment will be the one selected by default. If you would like to change it from the code, just replace the value of that variable with that of one of the other segments, for example:

public seleccionarOtroSegment(): void {
  this.pet = 'kittens';
}