We have encountered an issue where we are attempting to scroll to a specific <mat-expansion-panel> item within a <mat-accordion>. The problem arises because the ngAfterViewInit() is triggered before the accordion and its panels are fully loaded. This causes the scrollIntoView() function to be called while the accordions are still loading, resulting in changes to the page size and leading to our scroll operation taking us to the incorrect position on the page.
We have explored using other lifecycle hooks, but none have proven effective as they are all invoked too early. If anyone has any suggestions or best practices for resolving this issue, we would greatly appreciate it.
Our code is straightforward as we are trying to implement something basic:
landingpage.component.html
<mat-accordion>
<mat-expansion-panel id="pangel-1">
<mat-expansion-panel-header>
<mat-panel-title>Lorem ipsum</mat-panel-title>
</mat-expansion-panel-header>
<p>
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt...
</p>
</mat-expansion-panel>
[ ... ] // more panels
</mat-accordion>
landingpage.component.ts
ngAfterViewInit() {
this.scroll("panel-1");
}
scroll(id) {
console.log(`scrolling to ${id}`);
let el = document.getElementById(id);
el.scrollIntoView();
}