How to store a value in a select?

Question

Angular

Hello, I have such a problem. I select a value in the select, but as soon as I go to another page in the application, the value in the select is reset. Tell me how I can leave it there and not reset it when moving to other pages. Here is my select:

<mat-form-field class="for-select" appearance="outline">
            <mat-label>Select account</mat-label>
            <mat-select [(ngModel)]="activeUserAccount" (ngModelChange)="changeActiveUserAccount()">
              <mat-option>None</mat-option>
              <mat-option [value]="activeUserAccount" *ngFor="let activeUserAccount of userAccounts">
                {{activeUserAccount.name}}
              </mat-option>
            </mat-select>
          </mat-form-field>

Answer 1

It can be assumed that you are using a router, since we are talking about moving to another page. The state of the components is reset upon transition, i.e. all nested router-outlet components are re-initialized. It would be more difficult and worse if it were otherwise. You have two paths. First, save the state of the component in one way or another. Secondly, to reconsider the approach to the application architecture.
You can send data up to the parent component, use global storage, a service, or let the user save the data to the server. Which is logical when the page is responsible for its data set and when you go to another page, it is about a different data set. If you have a number of pages responsible for related data, you can exclude the transition between pages, make tabs, for example.
In my experience, it's not worth the hassle. Try to make it so that the page is responsible for the data set and the state is saved as the state of the page during the transition, i.e. so that when F5 is pressed, the data is restored (and lost if the user does not save it). Think of the page state as one that should be resumed after the browser/application is closed. If multiple sections are responsible for a related set of data, then the data should be stored in the parent component, and switching components should not be a transition between pages.