Yup I’ve already been working on that direction for the past few hours.
- If I use hidden the components are not “swapped”, they’re broken, and generally it’s just a huge mess.
- If I use ngIf it works for the component that was in the DOM first, but as soon as I swap to the other one I’m getting this error:
Cannot read property ‘length’ of undefined
TypeError: Cannot read property ‘length’ of undefined
at slideTo (http://localhost:8100/build/main.js:45186:36)
at Slides.slideTo (http://localhost:8100/build/main.js:56479:95)
When doing it like that I need to first let both components be added to the DOM in order for them to be initialized and also so that I can get their references using @ViewChild. I’m using an extra “initialized” boolean for that.
I also tried tracking the elements in runtime via @ViewChildren instead of just during initialization in case the elements are recreated each time they are added and removed from the DOM, I’m getting the same error.
It’d be great if you have any ideas how to solve that, or preferably, how to do it with one component.
Basically what I’m trying to do is swipe images in and out of the screen from all 4 directions, in case there might be a better way to do it than to use ion-slides.
For instance, an image is centered on the screen, the user swipes right - it is tweened right and a new image is tweened from the left towards the center of the screen. Like that for all 4 directions.
The swipes are detected separately, I’m not using ion-slides input, I’m literally using it only for the slides tween.
I was able to build a working solution by tweening images myself via a custom solution in all 4 directions without ion-slides, but there I’m having troubles responsively resizing the images to screen size, positioning them and tweening them accordingly. So it works, but images appear one over the other when tweened, they start at wrong positions, etc.