CODEWITHSUNDEEP
angularionic2
dbertels
dbertels

Reputation: 83

How to bind to an item in an ngFor loop in Ionic 2?

In my template, I have

<ion-card *ngFor="let item of items">
    <p>{{ item.timespan }}</p>
</ion-card>

However, instead of displaying the value inside the loop, I want to bind to it from somewhere else in the template, outside the ngFor loop, like

<h1>{{ timespan }}</h1>
<ion-card *ngFor="let item of items" [timespan]=“item.timespan”>
    …
</ion-card>

But I assume I can’t use [timespan] since it is not an input property of ion-card..

So does anyone know how else I can implement this binding?

Any help greatly appreciated.

Upvotes: 1

Views: 2734

Answers (1)

silentsod
silentsod

Reputation: 8335

You can accomplish this by using template instead of *ngFor to handle the loop:

<template ngFor let-item [ngForOf]="items">
  <h1>{{item.timespan}}</h1>
  <ion-card>
  …
  </ion-card>
</template>

Here's a Plunker you can muck about with.

Upvotes: 1

Related Questions