How do I pass data from a *ngFor item to a click Method

Question

I have some text data displayed in an item {{ item.id }}

<ion-item (click)="openPhotoList()">
   <ion-input type="text" [(ngModel)]="data.findingID">{{ item.id }}</ion-input>
</ion-item>

When I click on the item I start the Method openPhotoList()

openPhotoList() {
  this.finding =  this.data.findingID;
  console.log("finding number", this.finding);
  let navigationExtras: NavigationExtras = {
    state: {
      findingid: this.finding
    }
  };

 this.router.navigate(['/side-camera'], navigationExtras);
}

What I am trying to do is pass the {{ item.id }} from the html page all the way through to the side camera-page. I am not not committed to ion-item or anything for that matter. I just want to pass the data.

Answer 1

Maybe it is easier to just pass the item.id as a parameter in the openPhotoList function.

<ion-item (click)="openPhotoList(item.id)">
   <ion-input type="text" value="{{ item.id }}"></ion-input>
</ion-item>

Voila, you got the itemID for your navigation.

openPhotoList(itemID: string) {
  const navigationExtras: NavigationExtras = {
    state: {
      findingid: itemID
    }
  };

 this.router.navigate(['/side-camera'], navigationExtras);
}