angulartypescriptangular10viewchildviewchildren

Using QueryList gives the first HTML element

I'm using Angular 10, and trying to use QueryList, with the code below (just like many examples on the web)

HTML

<div *ngFor="let i of [1,2,3,4]" #someID>some content</div>

TS

  @ViewChild('someID') someIds: QueryList<ElementRef>;

When running console.log(this.someIds) in the component, after the component initialization, I'm actually getting an ElementRef object (probably the first or the last div) and not the whole list.

enter image description here

What am I doing wrong?

Solution

  • Change ViewChild to ViewChildren

    @ViewChildren('someID') someIds: QueryList<ElementRef>;