Ionic 2 passing data from to 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 ?

What do you Expect the `event.message` to be your using a for loop and at the bottom your trying to use a single event message, if you want it in the foot just copy the ngFor what is the issue? — johnny 5, Sep 05 '17 at 13:54
for example there are 10 events in the completeEvents and based upon that 10 slides are created dynamically. I just need the event.message from current slide, ngFor will give me all the messages. I want the event.message from the current slide to be passed to the footer. — Suneet Jain, Sep 05 '17 at 14:04

Reactgular · Accepted Answer · 2017-09-05T15:09:23.170

4

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.

edited Sep 05 '17 at 15:09

answered Sep 05 '17 at 14:16

Reactgular

52,335
19
158
208

This solution works, the only problem is now that the event is not fired the first time first slide is shown and the footer is empty. – Suneet Jain Sep 05 '17 at 15:07
1

@SuneetJain easily fixed with a `?:` conditional expression. – Reactgular Sep 05 '17 at 15:09
it does not work because the footer loads first and till that time completeEvents[0].message is not available and the app throws error "Cannot read property 'message' of undefined" – Suneet Jain Sep 05 '17 at 15:13
1

`` – Reactgular Sep 05 '17 at 15:17
solved the issue. Thanks a lot – Suneet Jain Sep 05 '17 at 15:27

Ionic 2 passing data from to in the same html

1 Answers1