I am trying to figure out the best way to pass data among sibling components. For example, let's say I have a data entry grid structured like this:
<tr *ngFor="let item of frm.controls.items.controls; let i=index" [formGroupName]="i">
<td><input type="text" formControlName="id" /></td>
<td><input type="text" formControlName="name" /></td>
</tr>
Now, imagine there is some TypeScript code that reacts to either the valueChanges or the focusout event for each field. If I want to access the data in the id field when a focusout event occurs on the name field, how can I achieve that?
onNameFocusout = function(nameControl) {
// Need to retrieve the id control for the same row as the name control
My challenge is that I only have access to the name control and need to get the corresponding id control for the same row.
I've considered a few options:
Add the id control as a parameter to the focus out event in the HTML of the name control:
<input type="text" formControlName="name" onNameFocusout="(frm.controls.items.controls[i].controls.id, frm.controls.items.controls[i].controls.name)" />Utilize a data sharing service where all values entered in the grid are stored and can be retrieved by any component. However, this method still requires knowledge of the row index to fetch the correct data.
If you have any suggestions on a more efficient approach or if one of these methods seems suitable, I would appreciate your input.
Thank you.