angular - Ionic slides - dynamically add slides before and after -

hi i'm using ngfor create set of 3 slides while starting in middle i'm guaranteed able slide left or right on start.

when slide right can simple listen reachedend , push slide array i'm looping.

but have problem adding slide beginning. if same above , use e.g. array.unshift() or spread add item beginning, view think it's on position 0 , snaps view new slide.

the code below work animates slide change index 1.

slide = [0,1,2] //example loop slidechanged(event) {     if(this.slides.isbeginning()){         this.slide = [this.slide[0]-1, ...this.slide];         this.slides.update();         this.slides.slideto(1)     } }  <ion-slides [initialslide]="1" (ionslidedidchange)="slidechanged($event)">     <ion-slide *ngfor="let item of slide">         <h1>slide {{item}}</h1>     </ion-slide> </ion-slides> 

any appreciated!

you can using ionslidenextend , ionslideprevend events slides. please take @ this working plunker

the view

<ion-header>   <ion-navbar>     <ion-title>dynamic slides demo</ion-title>   </ion-navbar> </ion-header> <ion-content>     <ion-slides #slider (ionslidenextend)="loadnext()" (ionslideprevend)="loadprev()" [initialslide]="1">         <ion-slide *ngfor="let n of numbers">             <h2>current slide: {{n}}</h2>         </ion-slide>     </ion-slides> </ion-content> 

the component

@component({...}) export class homepage {     @viewchild('slider') private slider: slides;      numbers = [0,1,2];     firstload = true;      constructor() {}      loadprev() {         console.log('prev');         let newindex = this.slider.getactiveindex();          newindex++;         this.numbers.unshift(this.numbers[0] - 1);         this.numbers.pop();          // workaround make work: breaks animation         this.slider.slideto(newindex, 0, false);          console.log(`new status: ${this.numbers}`);     }      loadnext() {         if(this.firstload) {           // since initial slide 1, prevent first            // movement modify slides           this.firstload = false;           return;         }          console.log('next');         let newindex = this.slider.getactiveindex();          newindex--;         this.numbers.push(this.numbers[this.numbers.length - 1] + 1);         this.numbers.shift();          // workaround make work: breaks animation         this.slider.slideto(newindex, 0, false);          console.log(`new status: ${this.numbers}`);     } }