Hello I have a situation where I use same child component twice in parent component. Children component is a dropdown. I use element ref for accessing dropdown from a parent component, but there is a problem that it returns the first element that matches a given component, so it always do things for the first children component and not the second which I use in parent component. My question how to target second child component I use in parent component? I added some pseudo code to better understand my question.

Parent component HTML

<app-dropdown></app-dropdown> <app-dropdown></app-dropdown>

Parent component TS

this.child.dropdownToggleRef.nativeElement.focus();

Children component TS

@ViewChild('dropdownToggleRef') dropdownToggleRef: ElementRef;

Children component HTML

<div
  #dropdownToggleRef
  [class.open]="open"
  [ngClass]="{ 'more mx-right': ellipsisMode }"
  [attr.aria-label]="ariaLabel"
  [attr.aria-haspopup]="true"
  [attr.aria-expanded]="open"
  [tabIndex]="disabled ? -1 : 0"
  [autofocus]="focus"
>
</div>