Persisting the view state in an angular application

Question

I have a view where I have few text inputs.The visibility of the inputs can be controlled by the user. When the user navigates across the application & returns back to the same page the state of the view should be as he had left the page (for that user session).

for ex: If there are 5 text inputs on the page (page two), user selects to hide 3 of them. Then he navigates to page one, when he returns back to page two he should see only two inputs(as he had chosen to hide the other three).

While doing my research I came across angular state management using ngrx/store, which seems to help in this cause, but the approach needed to be taken the angular way I am unaware of as I have no prior experience working with angular store/ state management in particular.

Please see the link for a small demo scale representation of the app being developed.

Thank you already!

Answer 1

An easy solution could be to maintain the status of that page(page two) in the LocalStorage or SessionStorage

Then with a (if) check if you have a status. If you have a state do the binding with the view.

Another solution would be to have a service that stores a memory object and inject it into the two components. This way you will be able to share data

The disadvantage of this is that if you reload the page you lose the status.

Note: Remember that angular has built-in directive that help you hide elements ngIf