title: Maintain multiple state of same component in Angular
body: <p>we are creating an application where list of users will be displayed dynamically using treeview component, on clicking the each user, a new component(app-user-profile-info) will be displayed in which the admin can select an item from list of items in the drop down, once the item is selected, item related details gets displayed in the same component.  Its so far going good.</p>
  <p><strong>main-page.component.html</strong></p>
  <pre><code>&lt;as-split-area size=&quot;75&quot;&gt;
              &lt;as-split direction=&quot;horizontal&quot; restrictMove=&quot;true&quot;&gt;
                  &lt;as-split-area size=&quot;18&quot;&gt;
                      &lt;p class=&quot;ml-3 mb-3 mt-3&quot;&gt;&lt;span class=&quot;e-underline&quot;&gt;Tree View&lt;/span&gt;&lt;/p&gt;
                      &lt;tree [tree]=&quot;tree&quot; (nodeSelected)=&quot;nodeSelected($event)&quot;&gt;&lt;/tree&gt;
                  &lt;/as-split-area&gt;
                  &lt;as-split-area size=&quot;82&quot;&gt;
                      &lt;app-main-component *ngIf=&quot;!viewProfile&quot;&gt;&lt;/app-main-component&gt;
                      &lt;app-user-profile-info *ngIf=&quot;viewProfile&quot;&gt;&lt;/app-user-profile-info&gt;
                  &lt;/as-split-area&gt;
              &lt;/as-split&gt;
   &lt;/as-split-area&gt;
  </code></pre>
  <p>There is only one component that gets displayed when clicked different users. In this case, when I switch to next user, the component get rendered again with already selected values are reset.</p>
  <p><strong>app-user-profile-info.component.html</strong></p>
  <pre><code>&lt;div class=&quot;container-fluid&quot;&gt;
   &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-md-3&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;ng-template #rt let-r=&quot;result&quot; let-t=&quot;term&quot;&gt;
                      {{ r.fileName}}
                  &lt;/ng-template&gt;
                  &lt;input type=&quot;search&quot; class=&quot;form-control&quot; #instance=&quot;ngbTypeahead&quot; placeholder=&quot;Search&quot;
                      aria-label=&quot;Search&quot; [(ngModel)]=&quot;model&quot;  [ngbTypeahead]=&quot;search&quot; [resultTemplate]=&quot;rt&quot;
                      [inputFormatter]=&quot;formatter&quot; (focus)=&quot;focus$.next($event.target.value); displayData($event)&quot;
                      (click)=&quot;click$.next($event.target.value)&quot; (keyup)=&quot;displayData($event)&quot;&gt;
                  &lt;small class=&quot;text-success&quot;&gt;**please select an option in drop down**&lt;/small&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&quot;row mt-3&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col&quot;&gt;
              &lt;table class=&quot;table table-bordered&quot;&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Index&lt;/th&gt;
                          &lt;th&gt;Date&lt;/th&gt;
                          &lt;th&gt;HoursWorked&lt;/th&gt;
                          &lt;th&gt;TotalWorkHours&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr *ngFor=&quot;let data of streamData;&quot;&gt;
                          &lt;td&gt;&lt;input type=&quot;checkbox&quot; /&gt;&lt;/td&gt;
                          &lt;td&gt;{{ data.index }}&lt;/td&gt;
                          &lt;td&gt;{{ data.date }}&lt;/td&gt;
                          &lt;td&gt;{{ data.HoursWorked || NA}}&lt;/td&gt;
                          &lt;td&gt;{{ data.HoursWorked || NA}}&lt;/td&gt;
                      &lt;/tr&gt;   
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
      
  &lt;/div&gt;
  </code></pre>
  <p>Is the below scenario can be achieved in Angular.</p>
  <ol>
  <li>Select User A, then app-user-profile-info component gets rendered, then select an item in the dropdown, the items details get displayed</li>
  <li>Select User B, then select a different item in the dropdown.</li>
  <li>Then select User A, is it possible to automatically select &amp; display already selected item in strep 1?</li>
  </ol>
  <p>Thanks,
  Mohan</p>