ionic-framework: bug: Ionic2 ion-slides not properly working with *ngFor

+1

+1

+1

+1

In my case, I delayed the creation of the slider until I have all the data needed (a simple *ngIf="items.length" to ensure that the items array was filled with fetched data). See: https://github.com/4ian/ionic2-slides-test/blob/master/app/pages/hello-ionic/hello-ionic.html

I made the same kinda workaround, something like what has been already posted here.

1. I put *ngIf="!isUpdatingSlides" on ion-slides element,
2. And then on ts file I made a variable named isUpdatingSlides: boolean = false;
3. And after I’m done changing slides I do this

setTimeout(() => {
	this.updatingSlides = true;
	setTimeout(() => {
		this.updatingSlides = false;
	}, 10);
}, 10);

The time outs here make sure that element has been done changing and slides already updated so we don’t get any more issues (I’ve encounter some). This will recreate the element but however on every update you will encounter a disappearance for more than 50ms and even some funny temporary behaviors but the good thing is that it works and it gives the feelings of something changed!! It’s good when you’re gonna put some dummy contents or pre-cached contents before getting actual values from server and changing it or change it with every update user might want to see.

On the swipper api you can see what you could put in the slide options. http://idangero.us/swiper/api/#.WIandPHhCkA

eg ###(onReachEnd): mySlideOptions = { pager:true, paginationClickable: true, onReachEnd : function(){ console.log("end"); this.showButton = true; } };

in the view you put the options: <ion-slides [options]="mySlideOptions">

Voila

did you manage to fix this issue? I’m facing similar issue when I try to specify an initial slide having [hidden] active.

SlideTo also doesn’t work

Two thing is really important when you are using ionic, and develop for mobile.

1, Try out your stuff without inspector window also on Chrome. 2, Instead of canvas use svg, as it’s horrible performance wise. Now my virtual scrolling started to work smoothly - there are lot’s of component which are not enough flexible, or just making me sad. (ng-lazyload-image) - it’s a very heavy stuff, ionic one is not working. simply use … 4-5 times faster.

P.s.: ion-slide is making a mysterious 2 additional slides on the fly, which is very sensitive when the data is dynamic.

@t1gu1 It seems ionic guys are rewriting slides component.

Thank you for the workaround - helped a ton