Angular: Scroll dynamic element into view knowing only its ID

Question

I have a dynamic list that gets its data asynchronously, and would like to scroll an specific element into view when the list is loaded.

The list is build similar to this:

<div class="items" *ngFor="let item of functionThatGetsItems(); let i = index" [id]="'MyList' + i">
    <div class="title">
        {{ item.title }}
    </div>
    <div class="content">
        {{ item.content }}
    </div>
  </div>      

As you can see, the items have an ID assigned that is simple a base string and their number. Let's say I want to trigger a scroll to MyList31. Once the list is loaded and rendered, how do I fetch the element with such ID and scroll to it?

I've searched around and found the ways you should not do it, and how to do it using ViewRefs, but these don't seem to work on dynamic elements, or do they? How would I do this?

Answer 1

You want the id to be on the actual item that the ng-for creates, not the ng-for itself. That would eliminate the need for any extra logic when passing data to the list from the component.

// inside ngAfterViewInit() to make sure the list items render or inside ngAfterViewChecked() if you are anticipating live data using @Inputs
const itemToScrollTo = document.getElementById('item-' + id);
// null check to ensure that the element actually exists
if (itemToScrollTo) {
  itemToScrollTo.scrollIntoView(true);
}

<div class="list" *ngFor="let item of functionThatGetsItems(); let i = index">
  <div class="list-item" id="item-{{i}}">
    <div class="title">
        {{ item.title }}
    </div>
    <div class="content">
        {{ item.content }}
    </div>
  </div>
</div>