How to store data when navigating between multiple pages in Angular?

Issue

I have the following problem in Angular. If I have two pages A and B each containing a table. Then I make changes to Page A in the table, and then navigate to Page B. Now I expect that when I navigate back to Page A, the changes are still there. I don't want to send the changes to the database until I click a save button. What is the best way to solve this in angular?

Solution

If you are only wanting to preserve the data for this one instance, then definitely look to using a Service and writing your data to localstorage for it to persist across page refreshes.

If you are developing a SPA, then I'm not sure why you need it to persist across a page refresh since moving between components does not actually send a new HTTP request. You state should be preserved in your Service.

If you find yourself needing to manage state across your entire application and want to do it reactively, I recommend checking out NGRX.

https://ngrx.io/

Another alternative that maybe has a little less boilerplate is NGXS, which does the same thing as NGRX.

https://www.ngxs.io/

Answered By - anthonyb