📄 Scrolling to a Specific QueryList Element

#angular #QueryList

list.component.html

<div 
  *ngFor="let item of items; let i = index" 
  #myElement
>
  <!-- Content of each item -->
</div>

<button 
  *ngFor="let item of items; let i = index" 
  (click)="scrollToElement(i)"
>
  Scroll to Element {{i}}
</button>

list.component.ts

@Component({...})
export class MyComponent {
  @ViewChildren('myElement') 
  public elements: QueryList<ElementRef>;
  public items = [...]; // Your array of items

  scrollToElement(index: number): void {
    const list = this.elements.toArray();
    const element = list[index].nativeElement;
    element.scrollIntoView({ behavior: 'smooth' });
  }
}

✅ Article link: https://medium.com/@garfunkel61/scrolling-to-a-specific-element-in-angular-ngfor-list-navigating-querylists-with-ease-bba15735b41b