Having trouble triggering a click event for an element reference based on its index in Angular 8. If anyone has a solution, please help me out!
Here is the code snippet from app.component.html:
<div class="st-item" *ngFor="let data of datalist; let i = index">
<input type="radio" name="st" id="{{data.name}}" />
<label for="{{data.name}}" #items (click)="showproduct(data.name)">
<span>
{{data.display}}
</span>
</label>
</div>
And here is the relevant part of app.component.ts:
@ViewChildren('items') liItems: QueryList<ElementRef>
ngOnInit(){
const indexItem = 2;
this.liItems.forEach((item, index) => {
if (index === (indexItem - 1)) (item.nativeElement as HTMLElement).click();
});
}
You can also check out what the liItems object contains by logging it: console.log(this.liItems);https://i.sstatic.net/N6jKv.png