Angular how to get index from viewChildren queryList items?

Question

I am watching for my radio buttons with :

  @ViewChildren('radioButton') radioButton: QueryList<MatRadioButton>;

Later I want to get the first and make it checked :

  public clickEmitFirst() {
    this.radioButton.forEach((radio,index) => {
        console.log(index);
        radio.checked = true;
        this.clickEvent.emit({ id: this.parentId, item: this.item });
    });
  }

The problem is that index is always 0 (3 console logs with 0)

How to fix that ?

When you just want to use the first, why not https://angular.io/api/core/QueryList#first? — MoxxiManagarm, Oct 12 '20 at 11:40
Maybe [this answer](https://stackoverflow.com/a/40165639/6444705) can help you ? — Emilien, Oct 12 '20 at 12:03
I think this queryList gives me 3 queries with 1 item , bcs first and last is the same — Devla, Oct 12 '20 at 12:08

score 1 · Answer 1 · answered Oct 12 '20 at 12:01

1

I've made a demo in which everything works (looping through viewChildren and getting the index). Try to compare this, maybe you've made a typo somewhere. stackblitz

answered Oct 12 '20 at 12:01

Олег Войтинський

739
6
17

score 0 · Answer 2 · answered Oct 12 '20 at 12:18

0

My foult, I was calling viewChildren function in my child component which has only one radioButton (Multiple child components with single radioButtons), thats why I was getting 0 index in each component.

answered Oct 12 '20 at 12:18

Devla

326
4
19

Angular how to get index from viewChildren queryList items?

2 Answers2