0

In my angular application I tried to dynamically generate ion-segment-buttons for each day of the week and then check today initially.

template:

<ion-segment class="ion-padding" (ionChange)="onChangeDay($event)">
<div [ngSwitch]="weekday" *ngFor="let weekday of workweek">
  <ion-segment-button *ngSwitchCase="workweek[today]" [value]="weekday" checked>{{weekday}}</ion-segment-button>
  <ion-segment-button *ngSwitchDefault [value]="weekday">{{weekday}}</ion-segment-button>
</div>

relevant ts code:

public workweek = ['mon', 'tue', 'wed', 'thu', 'fri']; 
public today = new Date().getDay()-1;

onChangeDay(event: Event) {

}
Paul Costa
  • 13
  • 5

2 Answers2

1

I solved it using ngModel

template:

<ion-segment class="ion-padding" (ionChange)="onChangeDay($event)" [(ngModel)]="segment">
   <ion-segment-button *ngFor="let weekday of workweek; let i = index;" [value]="i"> 
   {{weekday}}</ion-segment-button>
</ion-segment>

typescript code:

public workweek = ['mon', 'tue', 'wed', 'thu', 'fri']; 
public today = new Date().getDay()-1;

onChangeDay(event: Event) {

}
Paul Costa
  • 13
  • 5
0
  <ion-segment value="all">
    <ion-segment-button value="all">
      <ion-label>All</ion-label>
    </ion-segment-button>

    <ion-segment-button value="bookable">
      <ion-label>Bookable</ion-label>
    </ion-segment-button>
  </ion-segment>
Fahimeh Ahmadi
  • 813
  • 8
  • 13