I am working with an Angular 8 application.
Within the application, I have implemented navigation buttons for next and previous actions.
My goal is to ensure that when a user clicks on the "next" button, the subsequent page starts at the top of the page rather than where the previous state left off. To achieve this, I attempted to utilize the following code:
nativeElement.scrollTo(0, 0);
Unfortunately, this approach resulted in an error being thrown.
The navigation links related to this issue can be found within the EcheqProcessComponent component:
<app-echeq-page #scrollMe
*ngIf="!submitting"
[currentEcheqPage]="currentEcheqPage"
[currentEcheqPager]="currentEcheqPager"
></app-echeq-page>
<app-echeq-progress-nav
*ngIf="!submitting"
[currentPage]="currentEcheqPageIdx + 1"
[totalPages]="currentEcheqPath.length"
(next)="next()"
(previous)="prev()"
[isbtnDisabled]="currentEcheqSubmission?.status === EcheqSubmissionStatus.EXPIRED"
[conditionals]="{
isFirst: currentEcheqPager.isFirst,
sending: sending
}"
></app-echeq-progress-nav>
The paging behavior specific to navigating to the top of the page is addressed in the EcheqPageComponent:
export class EcheqPageComponent implements OnInit, AfterViewInit {
@ViewChild('scrollMe', { static: false }) private contentPageRef: ElementRef;
@Input() currentEcheqPage: EcheqPage;
@Input() currentEcheqPager: EcheqPager;
// We use template variables to query the components
@ViewChildren('echeqElement') elementComponents: QueryList<EcheqElementComponent>;
EcheqElement = EcheqElement;
elementsChanged = true;
constructor(private echeqService: EcheqService) {}
ngOnInit() {}
ngAfterViewInit() {
this.scrollOnTopPage();
}
private scrollOnTopPage(): void {
this.contentPageRef.nativeElement.scrollTo(0, 0);
}
}
However, attempting to implement this solution led to the following error:
echeq-process.component.html:13 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at EcheqPageComponent.push../src/app/echeq/echeq-page/echeq-page.component.ts.EcheqPageComponent.scrollOnTopPage (echeq-page.component.ts:79)
I tried adjusting certain elements in the markup as suggested below:
<app-echeq-page #scrollMe
[hidden]="submitting"
[currentEcheqPage]="currentEcheqPage"
[currentEcheqPager]="currentEcheqPager"
></app-echeq-page>
Additionally, I made changes like this:
<app-echeq-page #scrollMe
*ngIf="!submitting"
[currentEcheqPage]="currentEcheqPage"
[currentEcheqPager]="currentEcheqPager"
></app-echeq-page>
and also introduced a delay using setTimeout:
ngAfterViewInit() {
setTimeout(() => {
this.scrollOnTopPage();
}, 1000) ;
}
Despite these adjustments, the error persisted:
core.js:7376 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at EcheqPageComponent.push../src/app/echeq/echeq-page/echeq-page.component.ts.EcheqPageComponent.scrollOnTopPage (echeq-page.component.ts:81)
at echeq-page.component.ts:29
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:26760)
at
The structure of the large EcheqPageComponent.html file complicates resolving this issue:
<div class="echeq-page">
<h4 class="echeq-title">{{ currentEcheqPage.title }}</h4>
...(omitting rest of the content for brevity)...
</div>