Model values lost when switching tabs - vmware-clarity

Question

I'm working an application that uses Clarity's tab. Here's the code in my app.component file.
<clr-tabs>
<clr-tab>
<button clrTabLink>General1</button>
<ng-template [(clrIfActive)]="generalActive">
<clr-tab-content>
<form clrForm clrLayout="horizontal">
<clr-input-container>
<label class="required">Delta Update Timestamp</label>
<input clrInput type="text" size="30" [(ngModel)]="configDetailsdlta_updt_ts" [ngModelOptions]="{standalone: true}"/>
</clr-input-container>
<header-comp></header-comp>
</form>
<button type="button" class="btn btn-primary" (click)="validateConfigDetails()">Submit</button>
</clr-tab-content>
</ng-template>
</clr-tab>
.....
Within the first tab I've embedded another component named header-comp that is defined as
<clr-input-container>
<label class="required">Table Name</label>
<input clrInput type="text" [(ngModel)]="tbl_nm" size="50" [ngModelOptions]="{standalone: true}"/>
<clr-control-error>You must provide a table name</clr-control-error>
</clr-input-container>
The problem I'm having is when I enter a timestamp value, stored in the configDetails model on app.component, and a table name, stored in the tbl_nm model of header.component, and then switch to the second and then back to the first tab, the table name is lost. The timestamp value is still present.
Why is the entered table name value lost when switching tabs? I don't think this is an issue of parent-child communication because app.component can read the entered table name value entered when the Submit button is selected and provided I haven't switched tabs first.

Answer 1

When you use the ng-template and structural directive clrIfActive, it actually removes the rendered template from the DOM when you switch tabs. This is for performance and is desirable in many cases. If you don't want the tabs to be reset, remove the template and clrIfActive directive.
<clr-tabs>
<clr-tab>
<button clrTabLink>General1</button>
<clr-tab-content>
<form clrForm clrLayout="horizontal">
<clr-input-container>
<label class="required">Delta Update Timestamp</label>
<input clrInput type="text" size="30" [(ngModel)]="configDetailsdlta_updt_ts" [ngModelOptions]="{standalone: true}"/>
</clr-input-container>
<header-comp></header-comp>
</form>
<button type="button" class="btn btn-primary" (click)="validateConfigDetails()">Submit</button>
</clr-tab-content>
</clr-tab>
</clr-tabs>