Angular mat-tab lazy load and keep data between tabs

Question

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>

From the official docs about angular material lazy loading, it says Tab contents can be lazy loaded by declaring the body in a ng-template with the matTabContent attribute. You could also refer to the methods provided in this thread and this thread. — Yu Zhou

igor_c igor_c · Accepted Answer · 2019-08-14T16:30:25

If you have a known number of tabs and it's names, you can create an object with the names of the tabs as keys and empty values. Then you iterate through the list of keys of that object in the template. Then when user clicks on any tab the first time it will load data and it will be stored in the correct key in the global object. Then just read the data from that object without making another request.

Angular mat-tab lazy load and keep data between tabs

2 Answers