Scrolling to a Specific Element in Angular ngFor list: Navigating QueryLists with Ease

Imagine this: You’re building a dynamic Angular application where the user needs quick navigation through a long list of items. You want a seamless, intuitive experience, making their journey through your app as smooth as scrolling through a favorite social media feed. That’s where the magic of scrolling to a specific element in a QueryList comes into play.

Abstract

In this article, we’ll cover:

• Assigning a template reference variable to elements in Angular.
• Utilizing ViewChildren to access a QueryList.
• Creating a method for scrolling to an element.
• Binding click events for seamless navigation.
• A complete example of implementing this feature.

Assign a Template Reference Variable to Each Element

<div *ngFor="let item of items; let i = index" #myElement>
  {{ item }}
</div>

Imagine labeling each item in your grocery list so it’s easier to spot. In Angular, we do this using template reference variables (#myElement). These references act like unique labels for each element generated by an *ngFor loop in your template.