title: Save component state on route change [Angular]
body: <p>I have a component (tree widget) in Angular 2.</p>
  
  <p>It looks like this:</p>
  
  <pre><code>&lt;div *ngFor="let foo in foos"&gt;
      &lt;span (click)="isCollapsed[foo.id] = !isCollapsed[foo.id]"&gt;{{ foo.name }}&lt;/span&gt;
      &lt;div class="container" [ngClass]="{'hidden': isCollapsed[foo.id]}"&gt;
          &lt;div *ngFor="let bar in foo.bars"&gt;
              &lt;a [routerLink]="......."&gt;{{ bar.name }}&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have two levels, the second level is hidden/shown when clicked on the name of an element in the first level.</p>
  
  <p>The problem is that every time I click on a node in the second level, the tree loses it's state (closed nodes get open again and viceversa).</p>
  
  <p>I understand that this is because of how Angular's router is re-drawing all the components, and I know that I could hack some solution using local storage to persist the state of <code>isCollpased</code>, but I'm wondering if there is a way I can make Angular remember the state of the component and apply it automatically, or even better, just reuse it somehow instead of reloading/redrawing it. Is that possible?</p>