How to save the latest state of Angular components?

Question

Angular

I have several others inserted in the main component:

<app-tools *ngIf="type === 'A'"></app-tools>
<app-history *ngIf="type === 'B'></app-history>
<app-layers *ngIf="type === 'C'></app-layers>
<app-objects *ngIf="type === 'D'></app-objects>

All of them are activated by the *ngif

condition. When the user activates the component <app-history></<app-history>and does some work in it, after that he leaves the component, switching to another one.

Further, upon returning to the component <app-history></<app-history>, it is initialized again.

How to save the last state in the visited Angular component without using [hidden], because in this case a lot of memory is allocated for loading unclaimed components?

Answer 1

Store state in a service.
For example, for each component you make a service, run these services in the main component, and the descendants inject them to themselves.
It turns out like a local state, which will be destroyed if the "main component" is no longer needed.
It makes sense to consider using libraries for the state, such as ngxs or akita.
Components shouldn't store state at all, except for some small thing, like a highlighted menu item, or something like that.
You can also save state between page reloads by storing it in localStorage.