user image

Published in : 2022-03-01

Angular: HTML anchor tag with #idref issue


I am working on an Angular 10 project, where I am not using location hash strategy as I want to use HTML anchor tag with #idref concept. So my ng serve link is containing path like, //localhost:4500/dashboard/wallet.

<li routerLinkActive="active"> <a [routerLink]="['/dashboard/wallet']">Wallet</a> <ul > <li> <a href="#depoWallet">Deposit Wallet</a> </li> <li> <a href="#withdrawalWallet">Withdrawal Wallet</a> </li> <li> <a href="#trnWallet">Transaction</a> </li> </ul></li>

When I click on Deposit wallet, it should scroll down to bottom where I put id = “depoWallet”; But it is not working anymore!

I went through with this git thread, which should solve the issue using below line,

<a [routerLink]="['/dashboard/wallet/']" fragment="depoWallet" >Deposit Wallet</a>

When I click the anchor tag, It appends #depoWallet at the end of the URL but it doesn't scroll to the top of the browser.

Does anyone know the proper solution?


Shilpa Date : 2022-03-01

Best answers


Best answers


If you are using Angular 6+ then this approach will work for you.

#Approach 1: Angular 6 Introduced anchorScrolling property, which scrolls to #idref element. (No hash-location-strategy)

const routerOption: ExtraOptions = { anchorScrolling: 'enabled', //If you enabled it, it will allow you to scroll to the element by #idref useHash: false, // You already marked it false // ...other options if applicable};

Don't forget to import your RouterModule with above options.

RouterModule.forRoot(MY_APP_ROUTES, routerOption)

#Approach 2: Using scrollIntoView property using template reference variable.

Add your HTML code as below

<button (click)="scrollToIdRef(target)"></button><div #target>Your target</div>

Add your CSS code as below

scrollToIdRef(element): void { element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});}

This approach will work with Hash Location strategy too.

I recommend 2nd approach. You can make a common method and use it in all the component html-ts.


Rakshit Date : 2022-03-01

Yes 2nd approach worked for me, thanks for giving your time.

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How to call event handler onload for Angular application?
Publish date: 2022-03-02 | Comments: 2

Tag: Angular

How to reload Angular component without refreshing page?
Publish date: 2022-03-02 | Comments: 1

Tag: Angular

Static code analysis tools integration with latest Angular version
Publish date: 2022-02-25 | Comments: 1

Tag: Angular

In Angular project, RxJS isStopped is deprecated! What is the alternative?
Publish date: 2022-02-28 | Comments: 1

Tag: Angular

How to bind Weekends off to my kendo calendar in Angular?
Publish date: 2022-03-11 | Comments: 2

Tag: Angular

Rename key inside Object {}
Publish date: 2022-03-05 | Comments: 2

Tag: Angular

How to calculate distance between two Bluetooth devices?
Publish date: 2022-02-26 | Comments: 1

Tag: Angular