Ionic 6 Angular, Ion-Slide.slideNext() not function in custom button event

Question

I have a home component, with slider-item component which has my ion-slides. In home I have an ion-header which contains Previous and Next Buttons.

home.page.ts:

import { Component, ViewChild } from '@angular/core';
import { DataService, Item } from '../services/data.service';
import { SliderItemComponent } from '../slider-item/slider-item.component';
...
export class HomePage {
  @ViewChild(SliderItemComponent) slides;
  ngAfterViewInit(){
     this.slides.onlyExternal = true;
  }
...
  nextSlide(){
    console.log(this.slides);
    this.slides.slideNext();
  }

slider-item html:

<ion-slides modes="md" #slides>

home.page.html:

<ion-button (click)="nextSlide(slides)">Pick</ion-button>

When I click on the button I get:

SliderItemComponent {data: DataService, __ngContext__: LComponentView_HomePage(294)} //console.log here
core.js:6479 ERROR TypeError: this.slides.slideNext is not a function

So I see that this.slider is capturing the element/component correctly... What am I missing?

score 0 · Answer 1 · answered Sep 15 '21 at 23:37

I used IonSlides as type but it didn't help. For me, the above mentioned solutions didnt work (ionic v6.17.1). What worked was:

@ViewChild('slides', {static: true}) slides: ElementRef;

swipeRight() {
this.slides.nativeElement.slideNext();

altering {static: true} didn't throw any error

Ionic 6 Angular, Ion-Slide.slideNext() not function in custom button event

1 Answers1