Angular mat-tab lazy load and keep data between tabs

I am using Angular Material mat-tab and each tab has content of dynamic forms.

I am trying to use lazy loading approach in order to avoid loading all the tabs content at the beginning and only load per tab to improve performance specially in Internet Explore.

The problem i faced that it reloads the tab every time i change it and losing the data i have entered.

Any suggestion how to use lazyloading here?

<mat-tab-group [(selectedIndex)]="selectedTab"
(selectedIndexChange)="tabChange($event)">
<mat-tab #tab *ngFor="let page of dataset; let tabIndex =
index; trackBy: tabIndex;" [label]="page.title">
<ng-container *ngFor="let section of
page.groupedSections">
//I am loosing the data here if i do lazy-loading
<dynamic-form [fields]="section.fields"></dynamic-form>
</ng-container>
</mat-tab>
</mat-tab-group>

Continue reading...