Slides component has delayed initialisation of Swiper

[Lingomat]

Short description of the problem:

It can be problematic getting a working reference to the slides component, specifically the underlying Swiper class. The problem is essentially one of lacking a suitable lifecycle hook.

There are two issues. When the ion-slider component becomes available and when the Swiper class becomes available. They do not occur at the same time. One could use @viewchildren('mySlider') and use an observer to get a suitable lifecycle hook for ion-slider being available (if, say, it was being inserted with an *ngIf) but this does not solve the Swiper class issue.

It seems that Swiper is only initialized when there is at least one slide. A common use case is to have slides be obtained from some async service. It turns out to be necessary to wait until the slides appear before any actions involving the Swiper class.

Current workaround involves putting #slide on the slide child, and using @ViewChildren on slide, with querylist.changes.subscribe() and then using the first event to gain a valid reference to the Swiper class and so on.

What behavior are you expecting?

The documentation suggesting that @viewchild is sufficient. e.g. '''@ViewChild('mySlider') slider: Slides;''' is not fully descriptive of what it takes to get a working reference to the Swiper class.

Steps to reproduce:

1. Use <ion-slides #variable> in template
2. @ViewChild('variable') slider: Slides; in class.
3. Slides prototype methods are not available when expected, even when slider resolves. The .slider child of slider (slider.slider) will be undefined.

Other information:

if Slider was available even with zero slides, this problem would not occur but I have some recollection of using Swiper previously that there may be a problem with that.

One solution to this would be to have a callback from ion-slides rather like the (ionDidChange) hook that currently exists for slide changes. It doesn't need to pass a reference because at the time such an event is emitted, the user can retrieve a valid reference from @ViewChild.

Alternatively a documentation expansion with the 'hack' might be okay? It wouldn't be my choice.

Which Ionic Version? 1.x or 2.x

2 rc1

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.1 Gulp version: CLI version 3.9.0 Gulp local: Ionic Framework Version: 2.0.0-rc.1 Ionic CLI Version: 2.1.1 Ionic App Lib Version: 2.1.1 Ionic App Scripts Version: 0.0.36 OS: Node Version: v6.7.0

[Lingomat]

Turns out the @viewchildren hack can't be relied upon to get a reliable lifecycle trigger either. :(

[jgw96]

Hello! This has since been fixed with our rewrite of slides in TypeScript.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.