[SOLVED] Angular - scroll to table row on page load

Angular - scroll to table row on page load

I have a mat-table in my app (angular v20) that is loading a longer list. If an additional ID is provided, I would like to scroll to that ID in the table.

My problem is that I didn't find the right event to do this on page load. I have a button that can call my scrollToRow(id) method - this works nicely.

I tried to call the scrollToRow in ngAfterViewInit() - didn't work. changeDetection: ChangeDetectionStrategy.Default, not using signals. matTable's datasource is refreshed in ngOnInit.

<table style="width: 100%;" mat-table matTableResponsive matSort  [dataSource]="dataSource" (matSortChange)="announceSortChange($event)" >

Do you have an idea how this issue can be fixed?

Solution

This issue may happen because the table rows aren’t fully rendered yet when ngAfterViewInit runs.
A quick test to confirm is wrapping your scroll call in a setTimeout

ngAfterViewInit() {
  if (this.initialRowId) {
    setTimeout(() => this.scrollToRow(this.initialRowId));
  }
}