Martijn Martijn - 4 years ago 474
TypeScript Question

"ion-slides "options" has been deprecated", now what?

I'm trying to implement Ionic2's Slides, but I can't find how to set the settings:


ion-slides "options" has been deprecated. Please use ion-slide's input properties instead.


I can find the 'input properties' (e.g. autoplay, speed, direction), but I don't have a clue where to place this. Every example I find does
[options]="slideOptions"
where
slideOptions
are the settings, but that results in no result other that the deprecated notice.

I'm new to ionic v2 and typescript, I could probally get a hacky solution to work, but I want to do it right.




The HTML in
ion-content
:

<ion-slides [options]="slideOptions">
<ion-slide *ngFor="let item of items">
<img width="20%"src="{{item.thumb.source}}">
</ion-slide>
</ion-slides>


And the simplified class:
import { Slides } from 'ionic-angular';

@Component({
selector: 'page-example',
templateUrl: 'example.html'
})

export class Example {
public items: any;
private slideOptions: any;

@ViewChild(Slides) slides: Slides;

constructor(private navCtrl: NavController, public navParams: NavParams) {
this.items = [];
this.albumInfo = navParams.get('item');

this.getSlides();
}

// This does nothing:
goToSlide() {
this.slides.slideTo(2, 500);
}
// This does nothing:
ngAfterViewInit() {
this.slides.autoplay = 2000;
}


// Simple example of getting the slides
makeGetRequest():Promise<string> {
/* Get the items code, populates this.items
}
}

Answer Source

ion-slides have been changed. Make sure you have updated to the latest ionic version (2.0) Input properties listed in the site can be directly used in the html. Eg:

<ion-slides pager loop autoplay="2000">
 <ion-slide> ... </ion-slide>
</ion-slides>

To use properties other than those listed in input properties, you can use variable in your HTML.

<ion-slides #slides> 
   ...
</ion-slides>

and use it in TS:

 import { Component, ViewChild } from '@angular/core';
 import {Slides} from 'ionic-angular'

export class Example {
    @ViewChild(Slides) slides: Slides;
    constructor() {}
    ngAfterViewInit() {
        this.slides.autoplay = 2000;
        this.slides.autoplayDisableOnInteraction = false;
   }
}

In your case, ngAfterViewInit does nothing as you have not defined your variable in your html as <ion-slides #slides>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download