bug(slides): [hidden] breaks things

[dylanvdmerwe]

Ionic version: (check one with "x") [ ] 1.x [x] 2.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: If you bind to [hidden], when the ion-slides becomes visible the sliding is broken. Pages do not lock correctly.

<div style='width:100%;height:100%;' [hidden]='loading'>
   <ion-slides pager #slides>
      <ion-slide style="background-color: green">
         <h2>Slide 1</h2>
      </ion-slide>
      <ion-slide style="background-color: blue">
         <h2>Slide 2</h2>
      </ion-slide>
      <ion-slide style="background-color: red">
         <h2>Slide 3</h2>
      </ion-slide>
   </ion-slides>
</div>

Note that if you use *ngIf it works, but then @ViewChild becomes complicated.

Expected behavior: Slider should work correctly.

Other information: See attached repo: sliderTest.zip

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.10
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

[mhartington]

Seems like a duplicate of https://github.com/driftyco/ionic/issues/10176?

You need to call update after changing the visibility to readjust the slides. It has been added to the docs as it was previously set to private.

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