0

I would like to ask about angular 2 - 5 routing.

I think as its single page application when I use routing i found the behavior of the links is not the same as normal application cause the page not reloading.

when you click link in the middle of the page the route change the DOM but you stay in the same point of the page. ( not go to the top as normal application )

so is that is normal ? or there is something I miss about this ?

Yahya Essam
  • 1,832
  • 2
  • 23
  • 44

2 Answers2

1

This is normal in angular 5. However if you want to change this behaviour, you can listen to route changes and scroll to top.

Guilherme Meireles provides code for doing this:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
    selector: 'my-app',
    template: '<ng-content></ng-content>',
})
export class MyAppComponent implements OnInit {
    constructor(private router: Router) { }

    ngOnInit() {
        this.router.events.subscribe((e) => {
            if (!(e instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }
}
Brad Larson
  • 170,088
  • 45
  • 397
  • 571
Shrey Kejriwal
  • 726
  • 4
  • 13
0

It's "normal" since as you said, Angular is a Single Page Application.

Made simple, Angular routing allows you to stay on the same page, and changes the behavior of your browser (the document, window objects) to suit its behavior.

This behavior changes from the "usual" way of seeing web pages, that is 1 URL = 1 server-generated page.

In Angular's case, instead of requesting a page from the server at each URL change, it requests a single page when it starts (index.html), and it changes the content of it by using the URL.