Accessing data from the current slide from outside the slides?


I am trying to setup controls for slides where I can click on it and pass information to the next view from the current slide. This works when inside the <ion-slides> :

    <ion-slides #cardSlider >
      <ion-slide *ngFor="let animal of animals | keys" >
          <img data-src="{{ animal.animalPictures }}" (click)="goToAnimalDetail(animal)"/>

Where goToAnimalDetail() looks like this:

  goToAnimalDetail(animal: any) {
    this.navCtrl.push(AnimalDetailPage, {
      animal: animal

But how can I setup controls to do this outside the <ion-slides> box? I just want to have a static control bar that can pass to another view. I tried something like this:

<ion-icon name="undo" (click)="goToAnimalDetail(cardSlider.animal)"></ion-icon>

But that doesn’t work. Is there a way to access what I want?