Trigger click event dynamically in angular 8

Question

Tried to trigger click event for element reference based on index but not working in angular 8.If anyone know please help to find solution.

app.component.html:

        <div class="st-item" *ngFor="let data of datalist; let i = index">
            <input type="radio" name="st" id="{{data.name}}" />
            <label for="{{data.name}}" #items (click)="showproduct(data.name)">
                <span>
                    {{data.display}}
                </span>
            </label>
        </div>

app.component.ts:

  @ViewChildren('items') liItems: QueryList<ElementRef>

  ngOnInit(){ 
    const indexItem = 2; 
    this.liItems.forEach((item, index) => {
      if (index === (indexItem - 1)) (item.nativeElement as HTMLElement).click();
    }); 
  }

console.log(this.liItems);

Answer 1

If you didn't get any error in the console then I don't know what happened but 2 things I see is wrong there:

• ngOnInit is being called directly after component init but view is not always finished before this call. In this case you should try ngAfterViewInit or ngAfterContentInit to be sure ngFor and whole view is rendered. You didn't say where you called console.log(this.liItems) but calling it in this case in ngOnInit and getting anything than undefined would be weird
• In case you get ExpressionChangedAfterItHasBeenCheckedError try to encapsulate your code in setTimeout function

Let me know if there will be any new errors or you didn't get around with. Good luck!

Answer 2

You can check article related to it, may be you will found solution here.

https://dev.to/gloriamaris/how-to-programmatically-trigger-click-event-in-angular-4--3i6a

Note: I know this very late reply to this question, but may be this is helpful for someone.