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 angular.io/api/core/QueryList#first? — MoxxiManagarm
– MoxxiManagarm, Commented Oct 12, 2020 at 11:40
I think this queryList gives me 3 queries with 1 item , bcs first and last is the same — Devla
– Devla, Commented Oct 12, 2020 at 12:08

Олег Войтинський · Accepted Answer · 2020-10-12 12:01:45Z

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, 2020 at 12:01

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

8018 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Devla · Accepted Answer · 2020-10-12 12:18:41Z

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, 2020 at 12:18

Devla

3565 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular how to get index from viewChildren queryList items?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related