HI, i have 12 month segment buttons with slides in my app. i have to open the segment according to the current month. But the problem is when i set the segment with current month i am not able to slide to the previous slide. I am only able to slide to next segment and the index starts with one not according to the current index
html code
<ion-header>
<ion-toolbar class="androidTool">
<ion-segment #segment color="button" no-line no-border [(ngModel)]="tabs" (ionChange)="segmentChanged($event)">
<ion-segment-button (click)="selectTab(0)" id="0" class="0" color="button" value="0">
JAN
</ion-segment-button>
<ion-segment-button (click)="selectTab(1)" id="1" class="1" color="button" value="1">
FEB
</ion-segment-button>
<ion-segment-button (click)="selectTab(2)" id="2" class="2" color="button" value="2">
MAR
</ion-segment-button>
<ion-segment-button (click)="selectTab(3)" id="3" class="3" color="button" value="3">
APR
</ion-segment-button>
<ion-segment-button (click)="selectTab(4)" id="4" class="4" color="button" value="4">
MAY
</ion-segment-button>
<ion-segment-button (click)="selectTab(5)" id="5" class="5" color="button" value="5">
JUN
</ion-segment-button>
<ion-segment-button (click)="selectTab(6)" id="6" class="6" color="button" value="6">
JUL
</ion-segment-button>
<ion-segment-button (click)="selectTab(7)" id="7" class="7" color="button" value="7">
AUG
</ion-segment-button>
<ion-segment-button (click)="selectTab(8)" id="8" class="8" color="button" value="8">
SEP
</ion-segment-button>
<ion-segment-button (click)="selectTab(9)" id="9" class="9" color="button" value="9">
OCT
</ion-segment-button>
<ion-segment-button (click)="selectTab(10)" id="10" class="10" color="button" value="10">
NOV
</ion-segment-button>
<ion-segment-button (click)="selectTab(11)" id="11" class="11" color="button" value="11">
DEC
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-slides spaceBetween="40" #pageSlider (ionSlideWillChange)="changeWillSlide($event)">
<!-- Jan -->
<ion-slide>
<message-board [message]="message"></message-board>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
<!-- Feb-->
<ion-slide>
<message-board [message]="message"></message-board>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
<!-- March -->
<ion-slide>
<message-board [message]="message"></message-board>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
<!-- April -->
<ion-slide>
<message-board [message]="message"></message-board>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
<!-- May -->
<ion-slide>
<message-board [message]="message"></message-board>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
<!-- June -->
<ion-slide>
<message-board [message]="message"></message-board>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
<!-- July -->
<ion-slide>
<message-board [message]="message"></message-board>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
<!-- Agust -->
<ion-slide>
<message-board [message]="message"></message-board>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
<!-- Sept-->
<ion-slide>
<message-board [message]="message"></message-board>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
<!-- Oct -->
<ion-slide>
<message-board [message]="message"></message-board>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
<!-- Nov -->
<ion-slide>
<message-board [message]="message"></message-board>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
<!-- Nov -->
<ion-slide>
<message-board [message]="message"></message-board>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'
}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
<!-- Dec -->
<ion-slide>
<ion-list *ngIf="!message">
<button ion-item *ngFor="let item of eventList">
<ion-avatar item-start>
<small>
<tiny-calendar [day]=" item.date | date: 'EE'" [date]=" item.date | date: 'd '"></tiny-calendar>
</small>
</ion-avatar>
<p>
<small item-end> {{ item.date | date: 'MMM d , y'}}</small><br>
</p>
{{ item.name }}
</button>
</ion-list>
</ion-slide>
</ion-slides>
</ion-content>