How can i preserve the component state in order to make back button working after router.navigateByUrl

Question

How can I achieve browser back button working fine when I've a component with dynamic content loaded in, then I navigate out of him using this.router.navigateByUrl.

The problem is that component A is a search criteria form and result list, now If i've results populated dynamically and I click on result detail (component B) if I click back button I lost my search result list.

I need sticky component state, prevent destroying the component dom, is it possible in angular2?

Answer 1

So if I get your question right your problem is that you have a list, click upon an item in that list to get to the detail view (which is an own component) and you loose the information of those items, if you navigate back to the list.

Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service.

You will need a service that contains the items of your list. Check the official documentation, it's explained nicely there. https://angular.io/tutorial/toh-pt4#why-services