Angular2 application jumping to top of page on click event

Question

I am having an issue on an Angular2 application I have built where when I fire a click event from the view the page jumps to the top of the DOM. I have tried to use the 'preventDefault()' binding to the event method to stop this from happening but this does not solve my issue. Can anyone advise me as to thy this is happening?

Here is my code.The view:

<div class='pagination-wrapper'>
    <a class='page-link prev' [ngClass]="{'disabled': activePage <= 0}" (click)=pageBackward($event)>prev</a>
    <a *ngFor='let pageLink of pages' class='page-link' [ngClass]="{'selected': activePage === pageLink}" (click)=jumpToPage(pageLink)>{{ pageLink + 1 }}</a>
    <a class='page-link next' [ngClass]="{'disabled': activePage + 1 >= pages.length}" (click)=pageForward($event)>next</a>
</div>

And the relevant component code:

pageForward($event) {
  $event.preventDefault();
  this.activePage++;
  this.paginationChange.emit(this.activePage);
}

pageBackward($event) {
  $event.preventDefault();
  this.activePage--;
  this.paginationChange.emit(this.activePage);
}

jumpToPage(pageNum) {
  this.activePage = pageNum;
  this.paginationChange.emit(pageNum);
}

Thanks!

What does `paginationChange.emit(...)` cause? Does it some router nativation? — Günter Zöchbauer, Jan 11 '17 at 09:23
The paginationChange.emit method passes an integer to a parent component via the EventEmitter. — James, Jan 11 '17 at 09:23
I'd go with http://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link — Günter Zöchbauer, Jan 11 '17 at 09:27
What does paginationChange do? remove big chunks of the page and load a new one in place? or simply change values in the currently displayed page? — Ayyash, Jan 11 '17 at 10:10
I had the same problem. I realized that the content at the button of the page was within an `*ngIf`. When I clicked the button, that section disappeared, removing the scroll bar entirely. — Travis Parks, Jun 19 '17 at 16:31

Jaroslaw K. · Answer 1 · 2017-01-11T09:44:02.640

1

You should write:

In html:

<a href="#" (click)="someMethod($event)"></a>

and in a TypeScript file:

someMethod(event: any) {
   event.preventDefault();
   //some code
}

You are using $ characters unnecessarily in methods in typescript. This causes errors in some browser (Firefox f.e.). In addition you do not use event.preventDefault() in last method.

I hope that help you.

edited Jan 11 '17 at 09:44

answered Jan 11 '17 at 09:30

Jaroslaw K.

5,224
2
39
65

Also, adding 'href="#"' causes issues with the Angular2 routing. – James Jan 11 '17 at 09:33
@devoncrazylegs so could you tell me, which browser are you using? – Jaroslaw K. Jan 11 '17 at 09:42
@suraj I pointed out all the bugs in his code. Firstly, there is missing " " characters after (click) in HTML. Secondly, he unnecessarily used $ character in TypeScript file. The last thing is that he forget about event.preventDefault() in jumpToPage() method – Jaroslaw K. Jan 11 '17 at 09:47
I added the missing quotes. The $ character is used not for Typescript but for my naming conventions. Thanks for your input though – James Jan 11 '17 at 09:49
@devoncrazylegs: OK. But I warn you that you may have problems on some browsers like Firefox. – Jaroslaw K. Jan 11 '17 at 10:08
Oh really? Ok I shall remove the $ – James Jan 11 '17 at 10:31
Although I've just remembered Angular2 requires the $ in front of the variable name in order for it to be recognised as an event does it not? As seen here. So I shouldn't remove the $. When I do it is not recognised as an event. See 'Get user input from the $event object' from the official docs here: https://angular.io/docs/ts/latest/guide/user-input.html – James Jan 11 '17 at 10:37
It seems to me that you still do not understand me. Of course, you HAVE TO use $ character in your HTML code, if it will be recognise as event. But you can't using $ character in the method declaration. You have example in official docs, which you send: in HTML code, but onKey(event:any){//some code} in declaration your method. I remind you that you marked my answer as solution, if I helped you. ;) – Jaroslaw K. Jan 11 '17 at 10:46
Ah I see thanks. Well, your answer hasn't solved my problem with the page jumping but thanks for the information on the $ :) – James Jan 11 '17 at 10:52

Kurt Van den Branden · Answer 2 · 2020-06-06T18:04:29.740

0

You can also use the href attribute to prevent the page from jumping like:

<a href="javascript:void(0);" (click)="someMethod($event)"></a>

edited Jun 06 '20 at 18:04

answered Jun 06 '20 at 17:52

Kurt Van den Branden

11,995
10
76
85

Angular2 application jumping to top of page on click event

2 Answers2