Angular 4: Save component state after routing to another component

Question

I'm developing an application with angular and currently I have this problem:

I have a component in which the user can fill three selectboxes. After that he can start a search to find the matching matches. Now they can click on a hit and have the details displayed. The details are displayed in a second component. The transition from component 1 to 2 succeeds via a

[routerLink]="..."

My problem is when I go back to the overview, all data must be re-entered. How can I save the state of the first component so that the user does not have to fill out the three selectboxes again?

Answer 1

1 method would be to store the state in the local storage. So when you return back to the original page you can query to see if the item exists in the local storage if it does then reinitialise.

let data = {};
localStorage.setItem('settings', data);

Alternatively you can pass in the matches back and fourth via router parameters.

https://angular.io/guide/router