I have angular 8 application.
And I have some navigation buttons : next and previous.
But I want when user clicks next , that the next page will be begin on top of the page. and not where it is left the previous state. So I tried with
nativeElement.scrollTo(0, 0);
But then I will get an error.
So this are the navication links: EcheqProcessComponent
<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>
and this I have for the page when you have to been navigate on top of page: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);
}
}
But then I get this 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)
So what I have to change?
Thank you
you mean like this?
<app-echeq-page #scrollMe
[hidden]="submitting"
[currentEcheqPage]="currentEcheqPage"
[currentEcheqPager]="currentEcheqPager"
></app-echeq-page>
I have it now like this:
<app-echeq-page #scrollMe
*ngIf="!submitting"
[currentEcheqPage]="currentEcheqPage"
[currentEcheqPager]="currentEcheqPager"
></app-echeq-page>
and this:
ngAfterViewInit() {
setTimeout(() => {
this.scrollOnTopPage();
}, 1000) ;
}
but still get this error:
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
But this is very big page: EcheqPageComponent.html
<div class="echeq-page">
<h4 class="echeq-title">{{ currentEcheqPage.title }}</h4>
<div class="echeq-page-elementcontainer">
<ng-container *ngFor="let element of currentEcheqPage.elements" [ngSwitch]="element.type">
<app-html-display
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[currentEcheqPager]="currentEcheqPager"
*ngSwitchCase="EcheqElement.HTML_DISPLAY"
></app-html-display>
<app-youtube-player *ngSwitchCase="EcheqElement.VIDEO_DISPLAY" [url]="element.videoUrl"></app-youtube-player>
<div class="echeq-element-media echeq-element-media-image" *ngSwitchCase="EcheqElement.IMAGE_DISPLAY">
<img class="echeq-element-media-image" [src]="getValidImageUrl(element)" alt="Afbeelding" />
</div>
<app-bool-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.BOOL_QUESTION"
></app-bool-question>
<app-int-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.INT_QUESTION"
></app-int-question>
<app-str-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.STR_QUESTION"
></app-str-question>
<app-date-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.DATE_QUESTION"
></app-date-question>
<app-date-time-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.DATE_TIME_QUESTION"
></app-date-time-question>
<app-time-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.TIME_QUESTION"
></app-time-question>
<app-num-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.NUM_QUESTION"
></app-num-question>
<app-str-list-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.STR_LIST_QUESTION"
></app-str-list-question>
<app-str-enum-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.STR_ENUM_QUESTION"
></app-str-enum-question>
<app-num-enum-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.NUM_ENUM_QUESTION"
></app-num-enum-question>
<app-num-enum-set-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.NUM_ENUM_SET_QUESTION"
></app-num-enum-set-question>
<app-str-enum-set-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.STR_ENUM_SET_QUESTION"
></app-str-enum-set-question>
<app-bool-set-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchCase="EcheqElement.BOOL_SET_QUESTION"
></app-bool-set-question>
<app-bool-question
class="echeq-page-element"
#echeqElement
[answer]="getAnswerFor(element)"
[echeqElement]="element"
[isOnlyElementOnPage]="currentEcheqPage.elements.length==1"
*ngSwitchDefault
></app-bool-question>
</ng-container>
</div>
</div>
Also check the submitting in component:
export class EcheqPageComponent implements OnInit, AfterViewInit {
@ViewChild(EcheqPageComponent, { static: false, read: ElementRef }) private contentPageRef: ElementRef<EcheqPageComponent>;
...
ngAfterViewInit() {
this.scrollOnTopPage();
}
private scrollOnTopPage() {
if(!this.submitting) {
this.contentPageRef.nativeElement.scrollTo(0, 0)
}
}
}
and attach style for the EcheqPageComponent component as your scroll may not work