0

Basically I have a grid in Ionic that populates its rows using ngFor, and creates an ionic button that should let a user "View details" for an individual object. Think of it like a list of objects that shows a "preview" of their fields, but clicking the button should load a new component that contains all of the data for the object (All my objects are stored in the array bulls:

<ion-row [ngClass]="(i % 2 == 0) ? 'odd' : 'even'" style="border-radius: 20px; border-style: solid; border-color: grey; margin-top: 10px;" *ngFor="let bull of bulls; let i = index;" id="{{ 'bull' + i }}" >

//More ion columns
    
<ion-col><ion-button (click)="loadIndividualBull(i)" expand="block" color="primary" class="ion-text-wrap">View</ion-button></ion-col>

And inside this row is a few columns with some of the object's data with the "View" button at the end

When I click the View button, how can I pass the data for that one particular object into the template I have created that will display all of the object's data?

Edit: I think this post is what I'm trying to essentially do

jslate5
  • 1
  • 3

1 Answers1

0

I am assuming that the new component which shows the data of the particular object is not a different route. If the component is mentioned inside the ngFor you can simply use property binding.

<div *ngFor="let bull of bulls; let i = index;" >
    <detail-component [data]= "bull" ></detail-component>
</div>

The data property can be used inside the component using an Input decorator

Simply add @Input() data: < your data type for bull> in the detail component. Now you can use data variable in the view for the detail component.

If the detailed component is on some other route. Then you can use shared services to do so. The idea is to create a service that would have a variable (selectedBull for example), the first view(which has the ngFor) sets the data to this variable and the second route( which has the details) get the data from this route.

Ashish Kumar
  • 168
  • 12