title: keep reference of components hidden due to ngIf
body: <p>I have a questions div which generate some child components with ngFor.
  These child components have input fields for data. When user enters data in those field and clicks next button questions div is hidden with ngIf and preview div appears. When again back button is pressed preview div hides with ngIf and questions div appears. but because child components in questions div is created again so data from input fields is gone. Following is my html</p>
  
  <pre><code>&lt;!-- questions
  
       div--&gt;
      &lt;div class="questions activity_screen" *ngIf="showquestions"&gt;
                  &lt;div *ngFor="let component of components;let i=index"&gt;
                      &lt;app-termhost #cmp [term] = component [title]="component.title" [Qnumber]="i+1"&gt;&lt;/app-termhost&gt;
                  &lt;/div&gt;
                  &lt;a class="submit_button" (click)="getdata()"&gt;Submit&lt;/a&gt;
              &lt;/div&gt;
          &lt;!-- preview div--&gt;
              &lt;div style="width: 100%;height: 100%;display: flex;align-content: center;justify-content: center" class="preivew" *ngIf="showpdf"&gt;
                  &lt;button (click)="goback()"&gt;go back&lt;/button&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>How can I maintain the previous condition of those components so that data is not lost after questions div appears again after back button is pressed!</p>