I am currently working with an HTML table that looks like this:
<table>
<tr>
<td>Name</td>
<td>Surname</td>
<td>ID Number</td>
<td>Edit</td>
</tr>
<tr *ngFor="let person of people | async">
<td>{{person.name}}</td>
<td>{{person.surname}}</td>
<td>{{person.idNumber}}</td>
<td>
<input type="button" value="Change
(click)="saveSelectedPerson(person)">
</td>
</tr>
</table>
I am trying to create a function called (click)="saveSelectedPerson" so that when the button is clicked, the app navigates to another form where the user can edit the information of that specific person. I need to somehow pass that particular person into the ChangeInfoComponent, which is a separate component from this PreviewComponent.
I attempted creating an object in the PreviewComponent and assigning the properties from the clicked Person to it, but when I log that (this.goToPerson) object, it shows as undefined.
saveSelectedPerson(p: Person) {
console.log(p);
console.log(this.goToPerson);
this.goToPerson.name = p.name;
this.goToPerson.surname = p.surname;
this.goToPerson.idNumber = p.idNumber;
}
What could I be doing wrong? Is my approach correct, or should sharing objects between components be done in a different way rather than through public component properties?