Ionic-framework: [Ionic v4 with angular| Slides getActiveIndex, isBeginning and isEnd methods return not proper value

[bilalrazamoon]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.1 (/Users/bilal/.config/yarn/global/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.0
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 1.9.2
   ios-sim           : 6.1.2
   NodeJS            : v8.9.4 (/Users/bilal/.nvm/versions/node/v8.9.4/bin/node)
   npm               : 6.2.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000

Environment:

   ANDROID_HOME : /Users/bilal/Library/Android/sdk

Describe the Bug
Slides getActiveIndex,isBeginning and isEnd methods return not proper value. They return following:
ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array[0]}

Steps to Reproduce
Steps to reproduce the behavior:

1. Go to stackblitz example.
2. Click on Info button.
3. Check console.

Related Code
https://stackblitz.com/edit/ion-slides-info

Expected Behavior
getActiveIndex method should return index value and isBeginning and isEnd method should return boolean value.

[PRModi]

getting the same issue while calling getActiveIndex() method.

[oremike]

Getting the same. Work around displays the value.
slides.getActiveIndex().then(data => {
console.log(data);
});

[bilalrazamoon]

Should be documented that these methods return promise.

[oremike]

when viewing the app using ionic serve, the promise response works nicely (coded while in ionic serve). Then if run ionic build I get a compile error with
error TS2339: Property 'then' does not exist on type 'number'.
I then have to convert to a normal assignment to either run ionic serve, or ionic build so it does not fail on build. slightly unusual behaviour. This was on 4.0.2. I've just upgraded to 4.06 so will retest.

[oremike]

4.06 still has the issue. I cannot build without removing the .then but while it builds ok the app never gets the correct assignment.(asyn issue) I run ionic serve, it fails to compile with the .then, remove it, run ionic serve, then add the .then back in and app works as expected, ie values are retrieved. There is still an error but now it compiles successfully with the app still working while showing the below error.

[ng] ℹ ｢wdm｣: Compiled successfully.
[ng] ERROR in src/app/pages/dynamic-form/dynamic-form-slides-questions.component.ts(36,38): error TS2339: Property 'then' does not exist on type 'number'.
[ng] src/app/pages/dynamic-form/dynamic-form-slides-questions.component.ts(124,38): error TS2339: Property 'then' does not exist on type 'number'.

[adamlacombe]

Try this: https://stackblitz.com/edit/ion-slides-info-bzpu9s

app.component.html

<ion-slides #slides [pager]="true">

app.component.ts

@ViewChild('slides') slides;

const index = this.slides.nativeElement.getActiveIndex();

I'm not very familiar with Ionic Angular (or Angular in general), but it looks like you'll have to use the nativeElement property to be able to fire off methods in any Ionic element.

[oremike]

@adamlacombe thanks for posting that, fixed my problem, I can now build. I have lost access to lockSwipes but will find a workaround to that at some stage.

[adamlacombe]

Glad to hear you got it working!

This might help fix your lockSwipes() issue: https://github.com/ionic-team/ionic/issues/14227#issuecomment-410554872

[peterpeterparker]

that might help too to lock the swipe https://github.com/ionic-team/ionic/issues/14989

[bilalrazamoon]

From v4.0.0-beta.6, All methods of all ionic components return a promise.
Now, We can get proper value by handling promise or using async/await.

[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.