javascript - anchor href vs angular routerlink

Question

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 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