How to set dynamic template reference variable and access in angular 14

Trying to change the object array value using template reference variable, But not working. So, How to set the dynamic template reference variable and how to access it? In my application i am trying to change the allData object values like selected is true for particular dropdown(Bus and Cycle). from main.component.ts. It is not working. How to resolve this issue?

main.component.ts:

changeVal(veh) {
if(veh == this.userElements){
this.userElements.allData.forEach((value, i) => {
this.userElements.allData.selected = true;
});
}
}


main.component.html:

<div class="custom-select" style="width:400px;" *ngFor="let v of vehicle; index as i">
<p>{{ v }}</p>
<app-vehicle [data]="travals[v]" #[{{v}}]></app-vehicle>
</div>
<button (click)="changeVal('Cycle')">Change Cycle object values</button>
<button (click)="changeVal('Bus')">Change Bus object values</button>


Demo: https://stackblitz.com/edit/angular-ivy-m5h5wx?file=src/app/main/main.component.html

Continue reading...