CODEWITHSUNDEEP
angularangular2-templateangular2-formsangular2-directives
Shoaib Iqbal
Shoaib Iqbal

Reputation: 2730

keep reference of components hidden due to ngIf

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

<!-- questions

     div-->
    <div class="questions activity_screen" *ngIf="showquestions">
                <div *ngFor="let component of components;let i=index">
                    <app-termhost #cmp [term] = component [title]="component.title" [Qnumber]="i+1"></app-termhost>
                </div>
                <a class="submit_button" (click)="getdata()">Submit</a>
            </div>
        <!-- preview div-->
            <div style="width: 100%;height: 100%;display: flex;align-content: center;justify-content: center" class="preivew" *ngIf="showpdf">
                <button (click)="goback()">go back</button>
            </div>

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!

Upvotes: 3

Views: 1674

Answers (1)

Fateh Mohamed
Fateh Mohamed

Reputation: 21367

try to use hidden property instead of *ngIf, hidden will play only with css but *ngIf will delete completly the element :

 [hidden]="condition"

Upvotes: 9

Related Questions