Anchor Href Vs Angular Routerlink

I am trying to use anchor tag with href in my Angular 7 app. When I click on the link the url changes in the browser but the page doesn't get navigated to. It works if I put target

Solution 1:

Href is the basic attribute provided by Html to navigate through pages which reloads the page on click.

routerLink is the attribute provided by angular to navigate to different components without reloading the page.

Major difference between both is that href kills the state of the current page where routerLink doesnt lose the state of the page.

For Eg. if an input text box is present in the page, the routerLink will retains its value after navigation.The routerLink can be considered as the custom attribute of href in angular by overriding some of the features like Page reloading

Solution 2:

Navigating using href:

href is the default attribute provided by browsers for navigating (switching) between pages, where the entire page will be get re-loaded losing the current state.

whereas the hack is by preventing the default behavior.

for example:

Inside template:

 <a href="route" (click)=onClick($event) />

Inside Component:

onClick(event :Event){
    event.preventDefault();
}

Using the target attribute in href:

Please refer to https://www.w3schools.com/tags/att_link_target.asp

Navigating using routerLink:

Angular mimics the above behaviour inside routerLink directive

Solution 3:

Angular applications are Single Page Applications (SPA). Using href breaks that design pattern. The effect is that each navigation that utilises href completely resets your application state. Always avoid href when using Angular or any other SPA.

routerLink loads resources internal to Angular, and the page that loaded in the browser is never completely reloaded (and so app state is maintained.) A clue to this being the case is the browser's loading indicator:

When traditional links are followed, you'll see in your browser the spinner going (on the tab, or by the address bar in most cases.) When you're waiting for Angular components to load, that spinner will be idle.

It's something I always check when developing, when my state resets. Sometimes the problem is that I used href instead of routerLink.

Solution 4:

Using href directly tells the browser to open the link as a new, such that the app will be reloaded and still linked to the exact page that it has been configured for.

Based on the doc, routerLink navigates the app without reloading using the internal api.

you could click the link that uses href and routerLink to see the difference demo

Solution 5:

Sometimes you can't use routerLink, if for example, you are in a non angular web component.

A workaround that I used to get around the refresh problem was to check all "a" tag clicks and prevent the default behaviour if a routerlink attribute wasn't present and then use the router to navigate.

  @HostListener('window:click', ['$event'])
  onClick(e: any) {
    const path = e.composedPath() as Array<any>;
    const firstAnchor = path.find(p => p.tagName.toLowerCase() === 'a');
    if (firstAnchor && !firstAnchor.hasAttribute('routerlink')) {
      const href = firstAnchor.getAttribute('href');

      this.router.navigateByUrl(href);

      e.preventDefault();
    }
  }