anchor href vs angular routerlink

javascript html angular angular-router
tangokhi picture tangokhi · Sep 24, 2019 · Viewed 12.8k times · Source

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="_self" so this works 

<a href="/abcd" target="_self">Abcd</a>

but this does not work only the url changes in the browser but nothing happens

<a href="/abcd">Abcd</a>

where as if I use Angular routing and use RouterLink it works. 

<a routerLink="/abcd" routerLinkActive="active">Abcd</a>

Can anyone explain the behaviour please.

Answer

Thaks picture Thaks · May 4, 2020

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

Related questions

(change) vs (ngModelChange) in angular

Angular 1 does not accept onchange() event, it's only accepts ng-change() event. Angular 2, on the other hand, accepts both (change) and (ngModelChange) events, which both seems to be doing the same thing. What's the difference? which one is best for performance? …

Read More
Scroll to element on click in Angular 4

I want to be able to scroll to a target when a button is pressed. I was thinking something like this. <button (click)="scroll(#target)">Button</button> And in my component.ts a method like. scroll(…

Read More
What are the options for (keyup) in Angular2?

The following works great when the enter key is released. What other options are available for the keyup in addition to keyup.enter? <input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>

Read More