On my angular page, everything works smoothly when using the button. The page title is correctly displayed. However, upon reloading the page with the reload button, the title remains unchanged.
Here is a snippet of the HTML page:
Snippet from the header section:
<div class="alternate-theme" color="primary" style="height:30px;">
<span *ngIf="titleSite$ | async as title" class="center"gt; {{ title }} </span>
</div>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
<button mat-menu-item (click)="navigateMenu('home')">
<mat-icon color="accent">home</mat-icon>
<span>Home page</span>
</button>
</mat-menu>
a portion of the .ts file :
export class TopMenuComponent implements OnInit {
public titleSite$: Observable<string>;
}
navigateMenu(tag) {
this.titleSite$ = this.translate.stream('Sitetitle0'); // Default title
this.initialTag$ = tag;
if (tag === "home") {
this.titleSite$ = this.translate.stream('Sitetitle1');
this.router.navigate(["/"]);
}
While clicking the button generates the correct title, reloading the page defaults back to the original title.
Everything functions well except for the scenario when someone triggers a page reload.
How can I compel the page to display the selected title even after a reload?
Appreciate your assistance!