Is there a way to update the URL of a page in Angular 11 without causing a refresh?
I have tabs on my page, and when a tab is clicked, I want to add the name of the tab with a '#' prefix to the current URL. I've tried implementing this by checking the current URL, removing any existing '#', and adding the clicked tab's name. However, it doesn't always work correctly - only some tabs are functioning as expected. Is there an alternative method to update the URL without refreshing the page, ensuring that the navigation works correctly?
In my HTML:
<a href="#{{phase.TitleNew}}" title="" (click)="tabClick(phase.TitleNew)">{{phase.Title}}</a>
<div class="c-arquetype-phase__block -one" id="{{data.Phases.TitleNew}}">
In my typescript file:
tabClick(phase: any) {
this.flag = 1;
if (this.flag == 1 && this.router.url.includes('#')) {
let hashIndex = this.router.url.indexOf('#');
this.finalUrl = this.router.url.substr(0, hashIndex);
this.finalUrl = this.router.url.substr(0, this.router.url.lastIndexOf("#"));
}
else {
this.finalUrl = this.router.url;
}
this.hrefUrl = this.finalUrl + '#' + phase;
this.archetypePhases.forEach(data => {
if (data.TitleNew === phase) {
data.isClicked = true;
}
else {
data.isClicked = false;
}
})
this.location.replaceState(this.finalUrl + '#' + phase);
}