In the hierarchy of components, I have a grand parent component where I am passing the "selectedValue" to the parent component like so:
@Component({
selector: 'grand-parent',
template: '<parent [details]="selectedValue" ></parent>'
})
export class GrandParentComponent implements OnInit {
private selectedValue = 0 ;
ngOnInit() {
setTimeout(function() {
this.selectedValue =+ 1;
}, 1000);
}
}
Within my parent component, I am utilizing a loop to generate child components and passing the "selectedValue" in this manner:
<template ngFor let-tab [ngForOf]="arry" let-i="index">
<child [details]="selectedValue"></child>
// some more logic
</template>
The issue arises when each instance of the child component ends up with the last value of selectedValue. The desired outcome is for each child component to have its own unique "selectedValue". For example, if I pass 1, 2, 3 as selectedValues, then I want the child components to receive details as 1, 2, 3 respectively while iterating through them.
I am seeking a solution to achieve this custom object creation for every "selectedValue". Any suggestions or ideas on how to accomplish this would be greatly appreciated.