CODEWITHSUNDEEP
angularionic2
peterc
peterc

Reputation: 7883

How to get the instance of a ion-slides

I am using Ionic 2 ion-slides, and would like to call some instance methods on it. I have the following markup:

<ion-content padding>
  <ion-slides (ionDidChange)="onSlideChanged($event)" id="loopSlider">
   <ion-slide *ngFor="let slide of slides">
    <h1>{{ slide.title }}</h1>
  </ion-slide>
</ion-slides>
</ion-content>

I have tried using the following code I found in a (perhaps outdated) example:

 private gotoSlide(index: number): void {
   this.sliderComponent = this.app.getComponent('loopSlider');
   this.sliderComponent.slider.slideTo(index);
  }

but this.app.getComponent('loopSlider'); always returns null.

Does anyone know how to get the component instance so I can use its API?

Upvotes: 11

Views: 8853

Answers (2)

Grant
Grant

Reputation: 6347

Now that Ionic4 has been out for a while it's probably frugal to update answers like this, for it.

import { IonSlides } from '@ionic/angular';

export class...
@ViewChild(IonSlides) productSlider: IonSlides;

Upvotes: 9

jonrsharpe
jonrsharpe

Reputation: 122154

Per the Ionic documentation, you can do this using @ViewChild:

import { Component, ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';
...

@Component({
  ...
})
class MyPage {
  @ViewChild('loopSlider') sliderComponent: Slides;

  ...
}

Upvotes: 10

Related Questions