Angular 5 router - navigate away, but hide components instead of destroy them

Question

I am currently using the Angular router:

import {RouterModule, Routes, RouterLink} from '@angular/router';

Say I have this in a header:

 <mat-menu #appMenu="matMenu">
    <button routerLink="home" mat-menu-item>Home / Start</button>
    <button routerLink="about" mat-menu-item>Instructions / Tips / User Manual</button>
    <button routerLink="contact" mat-menu-item>About / Contact</button>
    <button routerLink="history" mat-menu-item>Run History</button>
    <button routerLink="settings" mat-menu-item>Settings</button>
 </mat-menu>

my question is - is there a setting with the Angular router that I can use, such that if I click on a new route, it will not destroy the components in the current route, but simply hide them?

It's not that I have data in the DOM that I want to keep, but I do have data in the component classes that I want to keep. I think one good solution would be to keep the data in a datastore instead of the components, but for the moment I'd like to keep the data in the components.

Answer 1

Answering your question - no, there is no option for that.

Yes, you can use RouteReuseStrategy class, implemntation of it 10 times harder then just create some storage service and retrieve data from it.