Ionic 2 passing data from <ion-content> to <ion-footer> in the same html

Question

I have a html page in Ionic 2 where I am generating ion-slide using *ngFor and I want to pass the data from ngFor to the footer in the same page.

<ion-content>
    <ion-slides>
        <ion-slide *ngFor="let event of completeEvents">
                {{event.message}}
        </ion-slide>
    </ion-slides>
</ion-content>

<ion-footer>
    <div>
        <p>{{event.message}}</p>
    </div>
</ion-footer>

how do I pass the event.message to the footer ?

Answer 1

You need to have a template variable that can be updated. Here this example uses a variable named current.

<ion-content>
    <ion-slides (ionSlideDidChange)="current = completeEvents[$event.getActiveIndex()]">
        <ion-slide *ngFor="let event of completeEvents">
                {{event.message}}
        </ion-slide>
    </ion-slides>
</ion-content>

<ion-footer>
    <div>
        <p>{{current ? current.message : completeEvents[0].message}}</p>
    </div>
</ion-footer>

The ionSlideDidChange event emits a $event which is an instance reference of the Slides component. So you can use that to call any of the published methods from the documentation.

I'm not sure if the event is fired the first time the first slide is shown. Therefore, I added the current || 0 to always show the first.

Edit:

I changed the answer so that current holds a reference to the current event. This makes it safer in the cases where completeEvents is updated dynamically elsewhere.