Slides ViewChild

#1

Hello, my ViewChilds slides are not working and I do not know the reason:

component.cs

  @ViewChild('slidePregacoes') slidePregacoes: Slides;
  @ViewChild('slideEventos') slideEventos: Slides;

  proximo() {
    this.slidePregacoes.slideNext();
  }

page.html

            <ion-slides [options]="slideOptsEventos" #slideEventos>
            <ion-slides [options]="slideOptsPregacoes"  #slidePregacoes>

Anyone have any idea why it did not work?

#2

When is proximo() being called? If the answer is not “definitively after the view has been completely built”, that’s your problem.

#3

It is being called on a button after loading the entire page.

<ion-button size="small" color="tertiary" (click)="proximo()">

It works when I only have a Slider with the following code:

@ViewChild(Slides) slideEventos: Slides;

If I put more than one ‘slides’ and refer to it as @ViewChild (‘slidePregacoes’) it stops working.

#4

Tricky one, first I think with v4, I mean you are trying with Ionic v4 right (?), you need to access them thru the nativeElement of ElementRef

@ViewChild('slideEventos') slideEventos: ElementRef;

this.slideEventos.nativeElement.slideNext();

Then, another tricky one, it’s depending of your configuration, slideNext might not work/be allowed, that’s the definition of the Swiper (not Ionic). If it still doesn’t work, could you plz show your options values?

#5

Your suggestion solved. Thank you!
Now another error continues when page mute:

Uncaught TypeError: Can not read property 'removeEventListener' of undefined

Do you have any idea what that is? I know it’s also attached to the slides.

#6

Update to beta.2 might help maybe?

Yesterday @brandyshea answered a question on the Ionic repo and mentioned that it’s better to access to Slides not with the native element but like following for example

@ViewChild('mySlider', { read: Slides }) slides: Slides;

 this.slides.getActiveIndex();

It’s cleaner. Unfortunately it didn’t work that well and I gonna stick to native element, but maybe for you it could workout

Reference: https://github.com/ionic-team/ionic/issues/15046#issuecomment-412128537

[Ionic 4 Beta] Unexpected @ViewChild return values
#7

I did the test and in my case it did not work either. Only with ElementRef that worked well. But, the ‘removeEventListener’ error remains.
Is the swiper you suggested to upgrade to beta.2?

#8

In any case I would definitely suggest to update to beta.2 if you didn’t did yet, it’s better I think for the swiper and scroll

I think you are facing https://github.com/ionic-team/ionic/issues/14822 which is solved now

1 Like
#9

All settled now. I changed the ElementRef as suggested and changed the nesting of my pages. Now everything running without errors. Thank you so much!

1 Like
#10

Just for the record, in Ionic v4 today, the correct way to to this is:

import {
  IonSlides,
} from '@ionic/angular';
...
@ViewChild('slides', { read: IonSlides }) slides: IonSlides;
...
// moving to some slide index, just an example
this.slides.slideTo(3, 0);
1 Like