title: Is there a way to preserve DOM state of the component after navigating away and back in Angular
body: <p>After researching the issue for a few days I've seem to have reached a dead end.</p>
  <p>I'm dealing with, what I assumed, was a fairly common scenario: After user navigates to a certain page and makes some changes (content of an input field, scroll through grid data or even changing some editable cell values ), he navigates to different page. When user returns to original page, all of the changes must remain the same.</p>
  <p>Now, that means that cursor in the aforementioned input field must be in the same place, scroll position in the grid and changed cell values, as well as any other changes user made, must be preserved.</p>
  <p>Solutions like storing data in localStorage, using services or even custom reuse strategy will not work, because saving that amount of information contained in multiple sub components will be impossible.</p>
  <p>Currently, I'm considering DOM manipulation, where rendered template will be moved to a container in parent component in <strong>onDestroy</strong> hook, and returned later in <strong>onInit</strong>. That, of course, is a hail Mary attempt and feels very unnatural.</p>
  <p>I'm hoping someone had (and solved) this problem before because, like I've mentioned, it seams like fairly common use pattern.</p>