Angular - scroll to table row on page load

Question

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?

• smcoder: I found my issue but Mario's comment lead to the real hint: stackoverflow.com/questions/59382950/… In my case, I also forgot to add the: export class ListComponent implements OnInit, ***AfterViewInit***

Answer 1

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));
 }
}

• smcoder: Thanks! Through your hint, I found it ;)