CODEWITHSUNDEEP
htmlangular
Rijo
Rijo

Reputation: 3043

Any difference or similarity between href and routerLink in Angular

This is my navbar.html 

<ul class="white">
      <li><a href="/signup">Signup</a></li>
      <li><a href="/challange">Create Challange</a></li>
      <li><a href="/feed">News Feed</a></li>
    </ul>

This is my app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>

Click on an each menu link its feel as loading an entire page even i run this code in localhost. But, I seen many angular project page is not loading entirely just change that url only.

My question, this problem is arrive from href? shall I use roouterLink to overcome this issue?

Upvotes: 2

Views: 3967

Answers (2)

Mohammad Jamal Dashtaki
Mohammad Jamal Dashtaki

Reputation: 1553

routerLink:

  • It is a directive in angular2+
  • Navigates to New Url and the component is rendered in place of routeroutlet without reloading the page

href:

  • Its an attribute of a tag
  • html anchor tag attribute to navigate to another page and reload the entire app

Upvotes: 2

Muhammad Usman
Muhammad Usman

Reputation: 10148

In angular you can define different states and then route to/render those states (using ui-sref as compared to href in simple html) without reloading page. Only url gets changes. Read more about ui-router here and here

Check this fiddle for demo code

Upvotes: -1

Related Questions