Ionic-framework: Slides: The ionSlideDidChange event is not fired after ion-slides is initialized

[alexkonovalov]

Ionic version:
[ ] 1.x
[x] 2.x
[x] 3.x

I'm submitting a ...
[x] bug report
[x] feature request
[] support request

Current behavior:
The ionSlideDidChange event is not fired after ion-slides is initialized and @Input initialSlide is not set or equals to 0.

Expected behavior:
The ionSlideDidChange event is always triggered after ion-slides is set to it's initial position.

OR

The new event like ionSlideAfterInit is introduced so it will be possible to trace the position of the slider after it loads like:

<ion-slides (ionSlideAfterInit)="ionSlideAfterInit($event)">

ionSlideAfterInit(slides) {
    let slidesIndex = slides.getActiveIndex();
    ...
}

Steps to reproduce:
Check out the console logs of this PLUNKER

Related code:
Most probably it's here:
https://github.com/ionic-team/ionic/blob/master/src/components/slides/swiper/swiper.ts#L823

Other information:
We need this functionality to show some data that's related to the current slide outside of the slider.

Our current approach is
to access slides by @ViewChild(Slides) slides
and
call slides.getActiveIndex() on both ionSlideReachStart and ionSlideDidChange

yet we are searching for a cleaner solution

[jgw96]

Thanks for opening an issue with us, we will look into this.

[basvdijk]

Can confirm this is still not working:

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.0
    Cordova Platforms  : android 6.4.0 ios 4.5.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2
    ios-sim    : 5.1.0
    Node       : v8.2.1
    npm        : 5.6.0
    OS         : macOS Sierra
    Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

[favrio]

it's still not working on 3.9.2.

@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.0
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
Node       : v8.9.1
npm        : 5.5.1 
OS         : macOS Sierra
Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : legacy

[cmartin81]

still not working. :(

[ghost]

You can subscribe to the slider progress events:

ngOnInit(): void {
    this.slider.ionSlideProgress.subscribe(progress => this.onSliderProgress(progress));
}

onSliderProgress(progress) {
    console.log(progress);
}

Not sure if it is a bug or not, but the first progress event is emitted _BEFORE_ ionViewWillEnter() and ionViewDidEnter() get a chance to fire, and to make it work I had to set a boolean in ionViewDidEnter() and then check for it in onSliderProgress().

So the final code looks like:

private _ionViewDidEnter_is_complete: boolean;
....
ngOnInit(): void {
    this.slider.ionSlideProgress.subscribe(progress => this.onSliderProgress(progress));
}

ionViewDidEnter() {
    this._ionViewDidEnter_is_complete = true;
}

onSliderProgress(progress) {
    if (this._ionViewDidEnter_is_complete && this.slider.getActiveIndex() == 0) {
        console.log('% progress: ' + progress);
        // do work here...
    }
}

The downside is that onSliderProgress() will fire on every slide change, therefore, if you only need to do some one-time initialization when the slider is first loaded, then you need to add extra conditions, such as this.slider.getActiveIndex() == 0 or whatever fits your use case.

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/83