typescript observable doesn't refresh on page reload

Question

I have an angular page that works when I use the button. It writes the page title correctly. Unfortunately, when the page is reloaded with the reload button, the title is not rewritten. Here's a part of the html page:

a part of the header portion:

 <div class="alternate-theme" color="primary" style="height:30px;">
    <span *ngIf="titleSite$ | async as title" class="center"> {{ 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(["/"]);
   }

So when The button is clicked the right title is written. But If I reload the page it's the default title.

Everything is working fine, unless someone click the reload.

How can I force to use the right title, ? the one that was previously click in the menu.

Thanks

Answer 1

Each time you hit refresh you are destroying the variables, so when the page is loaded inital value will allways be default title.

Possible solutions:

1. Use local/session storage to keep information about active title, and on init read the value from there. If it doesn't ecist then it is default title.
2. Store it on server/somewhere externaly