How to clean the #route path after the click in the menu

Question

I have a small menu that helps the user to navigate around the same page by scrolling to the option:

 <div class="listContainer"> <div class="row"> <div class="list-group" id="list-tab" routerLinkActive="active-link"> <ul> <li><a routerLink="./" [fragment]="'stockunityinformation_title'">Stock Unity Information</a></li> <li><a routerLink="./" [fragment]="'addtionalreferences_title'">Addtional references</a></li> <li><a routerLink="./" [fragment]="'warehouse_information_title'">Warehouse Information</a></li> <li><a routerLink="./" [fragment]="'serialnumber_title'">Serial Number</a></li> <li><a routerLink="./" [fragment]="'TransactionHistory_title'">Transaction History</a></li> </ul> </div> </div> </div> 

The problem with this is that if the user clicks at the option "TransactionHistory_title" for example, scroll up and then click at the same option again, it wont work because the route is set in the url already.

How can I 'reset' the route after the click?

localhost:4200/detailview#TransactionHistory_title

Instead of having the example above, after the click and the redirect to the element, have an URL like this:

localhost:4200/detailview

I don't have much experience with angular and html so please, if possible, make the explanation newbie friendly.

Thank you very much! =)

Answer 1

I'm use for scroll ngx-scroll package

<button [ngx-scroll-to]="'#destination'">Go to destination</button>

 <div id="destination">
   You've reached your destination.
 </div>

  npm i @nicky-lenaers/ngx-scroll-to

ngx-schroll-to package

...
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
 ...

@NgModule({
 imports: [
  ...
  ScrollToModule.forRoot()
  ],
  ...
 bootstrap: [AppComponent]
  })
 export class AppModule { }

Answer 2

You can try this.

<a [routerLink]="['/']" [queryParams]="{}"> Applications</a>

or this

<a [routerLink]="['/']" [queryParams]="{selected: true}"> Applications</a>

or this

this._router.navigate(['/'], {queryParams: {selected: true}});

or this

this.router.navigate(['/'], { fragment: 'top' });