2

When I develop in Angular and create views, I always use the routerLink to navigate from one view to another. Recently I have seen important pages made in Angular that use href instead of routerLink to route views on the website. My question is, when is it convenient to use href instead of routerLink in Angular and why? Is it to give the feeling that it is not a SPA?

If so, I do not understand it because it loses the full potential of Angular routing.

Some examples are

https://brandstory.in/
https://www.forbes.com/sites/karstenstrauss/2019/01/22/the-most-sustainable-companies-in-2019/#46dd14376d7d
https://about.google/
https://www.colgate.es/
https://marketingplatform.google.com/intl/es/about/enterprise/

Thanks in advance

Mr. Mars
  • 762
  • 1
  • 9
  • 39

2 Answers2

4

When we use href in angular the app loses its state and the entire app gets reloaded. But when we use routerlink the state of the app remains the same E.g. Let's assume you have two pages/component in your angular project named as second and third.

<div class="nav">
  <p>Using "href"</p>
  <ul>
    <li><a href="/" >1</a></li>
    <li><a href="/second" (click)="onClick($event)">2</a></li>
    <li><a href="/third">3</a></li>
  </ul>
</div>
<hr>
<div class="nav">
  <p>Using "routerLink"</p>
  <ul>
    <li><a routerLink="/">1</a></li>
    <li><a routerLink="/second">2</a></li>
    <li><a routerLink="/third">3</a></li>
  </ul>
</div>
<hr>
<div class="page-content">
  <p>Page Content</p>
  <router-outlet></router-outlet>
  <hr>
  <p>Input Field</p>
  <app-input></app-input>
</div>

In the above example, if you type something in the input filed and use href navigation to navigate then the state of that will get losses. But when you use routerlink navigation to navigate you will have that input text.

Let's see what happens behind the screen:- 

<li><a href="/second" (click)="onClick($event)">2</a></li>

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

if you prevent the default action of href you will see that page will not get reloaded that what happens in routerlink, this simply means that routerlink also used href for navigation but by preventing its default behaviour.

Aniket
  • 391
  • 5
  • 13
  • First of all, thanks for your answer. I understand how bothof them work, but the doubt is more philosophical or more oriented to seek the meaning of what I mention in the question. What is the motivation to use href in Angular instead of routerLink. An example is https://brandstory.in (made with Angular 7 and SSR), in which any of the main menu links are made with href instead of routerLink, despite being internal routes of the page. I'm trying to see if it can be to give the feeling that it isn't a SPA, since this occurs in many pages made in Angular and that are on the Internet. – Mr. Mars Oct 30 '19 at 22:04
  • I understand how it works. Thanks. But if I prevent the default behaviour of href, the navigation won't work, doesn't? I only avoid to reload the page, but the navigation will not occur. – Mr. Mars Oct 31 '19 at 09:10
  • Yes if you prevent the behaviour then navigation won't work. But you can do anything else that's what routerlink do to achieve the task – Aniket Oct 31 '19 at 09:12
  • Yes, I supose that routerLink prevents the default behaviour of the href and then applies its own logic to load the new components and therefore the new views. And what could be the reason why some pages made with Angular use the default behavior of href (reloading the page) instead of the Angular routerLink? Thanks in advance. – Mr. Mars Oct 31 '19 at 09:18
  • 1
    It totally depends upon the developer and the requirements of the project that how that page should gets loaded. I don't think the angular page by default used the href behavior. It's up to the approach and how the developer did that task. – Aniket Oct 31 '19 at 09:22
  • Thanks for your time and patience. I will accept this answer as the correct one. – Mr. Mars Oct 31 '19 at 09:48
1

Use href for external links which is used with a tag and routerLink for routes. You cannot use href with any other tags but a tag only but you can use routerLink decorator with other tags.

href is an attribute of a tag and routerLink is an Angular decorator.

Maihan Nijat
  • 9,054
  • 11
  • 62
  • 110
  • First of all, thanks for your answer. I understand how bothof them work, but the doubt is more philosophical or more oriented to seek the meaning of what I mention in the question. What is the motivation to use href in Angular instead of routerLink. An example is https://brandstory.in (made with Angular 7 and SSR), in which any of the main menu links are made with href instead of routerLink, despite being internal routes of the page. I'm trying to see if it can be to give the feeling that it isn't a SPA, since this occurs in many pages made in Angular and that are on the Internet. – Mr. Mars Oct 30 '19 at 22:03