Ionic-framework: ion-slides browken if using [hidden]="isHidden" attribute

[badpenguin]

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

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

Current behavior:
The slider starts hidden but when the condition become false the slider appears but only the first item is usable.
The swipe gesture will not work: it stops halfway and the first item remains active; it does not go forward and it does not go back (loop).
Also trying to programmatically switching the slider with SlideTo(index) does not works too.
The slider is fixed stucked at first element.

If the [hidden] attribute is removed the slider works normally: gesture, slideTo(), loop, etc., all is ok.

Expected behavior:
Correctly show the slider and work when [hidden] becomes false.
Or provide a programmatic method to refresh the slider to make it work.

Steps to reproduce:

Create a ion-slides with the [hidden] attribute.

Related code:

<ion-slides #slider [options]="mySlideOptions" pager="false" loop="true"(ionWillChange)="doEventChange()" [hidden]="!showSlider">
<ion-slide *ngFor="let item of ShopService.filteredItems">
<shop-item [item]="item" map="true"></shop-item>
</ion-slide>
</ion-slides>

[wbhob]

Just use *ngIf. [hidden] uses the visibility property and is not very stable, whereas *ngIf will add it to and remove it from the DOM as necessary.

[badpenguin]

Thanks with *ngIf it works

[wbhob]

Close this please?

[badpenguin]

Yup, sorry was doing some extra checks using directly style.display

[erperejildo]

@wbhob *ngIf is not alway the way that we need. In my case I want the slider hidden by default but I need to do some calculations and prepare the slider first. I cannot do it if the slider doesn't exist on the template.
Also I need to hide it at some points and there is no reason to recalculate the whole thing.

We should be able to archive this using both ways.

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