How can i trigger click on specific nth-child(x) item in ngFor listing ?

<ul>
    <li class="list"  *ngFor="let ver of versions; (click)="versionView()">{{ver.name}}</li>
</ul>

How can i trigger click on specific nth-child(x) item in ngFor listing ?

<ul>
    <li class="list"  *ngFor="let ver of versions; (click)="versionView()">{{ver.name}}</li>
</ul>

• javascript
• angular
• ngfor

• Do you need to trigger the click programmatically after rendering the block? Besides, there is a syntax error in your HTML above. – briosheje Commented May 3, 2019 at 14:46
• Yes, I need to trigger the click programmatically after rendering the block @briosheje – ShibinRagh Commented May 3, 2019 at 14:57
• Ok, answer ining. – briosheje Commented May 3, 2019 at 14:58

4 Answers 4

If you need to trigger programmatically the click on init (assuming you need a real click event that will also include the propagation, otherwise you can just raise the click event), you can do that using ViewChildren and NgAfterViewInit.

Basically, you can use a selector to acquire all the <li> items:

<ul>
  <li #items class="list" *ngFor="let ver of versions;" (click)="versionView(ver)">{{ver.name}}</li>
</ul>

(note the #items selector).

In your ponent, you can declare a selector targeting "items": @ViewChildren('items') liItems: QueryList<ElementRef>.

After that, you can loop through the items after the view is ready and trigger the click on the native html element:

  public ngAfterViewInit() {
    const targetItem = 10;
    // If the item is the 10th element, click it.
    this.liItems.forEach((item, index) => {
      if (index === (targetItem - 1)) (item.nativeElement as HTMLElement).click();
    });
  }

Full ponent code sample:

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: [ './app.ponent.css' ]
})
export class AppComponent  {
  @ViewChildren('items') liItems: QueryList<ElementRef>

  public versions: { name: string }[];

  public constructor() {
    this.versions = Array.from({length: 10}).map((_, i) => {
      return { name: i.toString() };
    });
  }

  public versionView(i: {name: string}) {
    console.log('clicked item: ', i);
  }

  public ngAfterViewInit() {
    const targetItem = 10;
    // If the item is the 10th element, click it.
    this.liItems.forEach((item, index) => {
      if (index === (targetItem - 1)) (item.nativeElement as HTMLElement).click();
    });
  }
}

Working stackblitz: https://stackblitz./edit/angular-1eha8j

(check the console to see that the item 10 is clicked)

Beware: In the sample above I've used forEach to loop the items, but you can simply acquire the item you need using .find or by simply getting the item at a specific index. The above example is just to show that many manipulations are possible through selectors.

Click event will be called every time, but it can be checked through index, whether it matches the expected index or not?

<ul>
    <li class="list" *ngFor="let ver of versions; let i = index" (click)="versionView(i)">{{ver.name}}</li>
</ul>

And index can be checked on *.ts code as below:

function versionView(i) {
    if (i == NTH_VALUE) {
         
    }    
}

<ul>
    <li class="list" *ngFor="let ver of versions; let i = index" (click)="versionView()">{{ver.name}}</li>
</ul>

You can add let i = index in order to refer the nth element, and use it as you prefer. You can pass it as a parameter in your versionView() function and use it there.

function versionView(i) {
    if (i !== NTH_VALUE) {
        return 
    }
    // Execute your function here
}

I hope this is what you were looking for.

You are really close. Modify your code like so:

<ul>
  <li class="list" *ngFor="let ver of versions" (click)="versionView(ver)">{{ver.name}}</li>
</ul>

In your corresponding ponent you just need to add:

versionView(ver: any) {
  // Do something with the ver object
}