user image

Rakshit
Published in : 2022-03-01

Angular: HTML anchor tag with #idref issue

Angular

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, http://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?

Comments

Shilpa Date : 2022-03-01

Best answers

10

Best answers

10

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 bind Weekends off to my kendo calendar in Angular?
Publish date: 2022-03-11 | Comments: 2

Tag: Angular

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

Tag: Angular

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

Tag: Angular

How to translate Angular application easily?
Publish date: 2022-03-03 | Comments: 2

Tag: Angular

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

Tag: Angular