Trigger click on specific item under nested loop Angular ngFor

Question

How to target on the specif item under the nested loop

<ul #parents *ngFor="let parent of parents">
     <li #child *ngFor="let child of parents.childGroup"> {{child.name}} </li>
<ul>

Ts File

Asper my code my target is parents[5].child[0] , but its working as child parents[0].child[0]

@ViewChildren('parents') parents : QueryList<ElementRef>
 @ViewChildren('child') child: QueryList<ElementRef>

this.parents.forEach((item, index) => {
if (index === 5 ) {
(this.child.find( (item , index) => index === 0 ).nativeElement as HTMLElement).click();
}


});

Each parent has own children, Here target calculated based on all child index

How to solve this problem?

Adrita Sharma · Accepted Answer · 2019-05-24 09:58:28Z

2

You can set dynamic id in html element like this:

<ul #parents *ngFor="let parent of parents">
     <li #child *ngFor="let child of parents.childGroup;let i=index" id="{{'child'+ i }}">
          {{child.name}} 
    </li>
<ul>

and then click from typescript.

this.parents.forEach((item, index) => {
  if (index === 5 ) {
    document.getElementById("child" + index  ).click();
  }
});

answered May 24, 2019 at 9:58

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

5 Comments

ShibinRagh Over a year ago

Its alternate solution, I will look this if there is no solution in angular

ShibinRagh Over a year ago

There is chance IDs duplicate same name, id name child1, child2, ... same repetition in each group

Adrita Sharma Over a year ago

Index will not be duplicate, it will increment from 0 to ...n and if you have diffect groups, give group specific name in place of 'child'. Maybe something like {{'child'+ parent.name + i }}

ShibinRagh Over a year ago

Okay including parentIndex number also in ID name 'child01' ,'child02' etc

Adrita Sharma Over a year ago

Yes.. that would do

Ikhlak S. · Accepted Answer · 2019-05-24 10:55:42Z

1

You can do this without ViewChild() refs.

You can add an click event listener on the child component and pass it parameters.

<li *ngFor="let child of parent.children" (click)="handleClick(parent, child)">

And then handle the click accordingly.

handleClick(parent, child){
  console.log(parent);
  if(this.parents[1] === parent && (parent.children.indexOf(child)) === 1 ){
    alert(`You clicked ${child} of parent ${parent.id}`)
  }
}

Here is a demo

edited May 24, 2019 at 10:55

answered May 24, 2019 at 10:50

Ikhlak S.

9,10411 gold badges60 silver badges80 bronze badges

Collectives™ on Stack Overflow

Trigger click on specific item under nested loop Angular ngFor

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related