title: Angular mat-tab lazy load and keep data between tabs
body: <p>I am using Angular Material mat-tab and each tab has content of dynamic forms. </p>
  
  <p>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.</p>
  
  <p>The problem i faced that it reloads the tab every time i change it and losing the data i have entered. </p>
  
  <p>Any suggestion how to use lazyloading here?</p>
  
  <pre><code> &lt;mat-tab-group [(selectedIndex)]="selectedTab"  
     (selectedIndexChange)="tabChange($event)"&gt;
       &lt;mat-tab #tab *ngFor="let page of dataset;  let tabIndex = 
          index; trackBy: tabIndex;" [label]="page.title"&gt;
         &lt;ng-container   *ngFor="let section of 
           page.groupedSections"&gt;
           //I am loosing the data here if i do lazy-loading
          &lt;dynamic-form [fields]="section.fields"&gt;&lt;/dynamic-form&gt; 
         &lt;/ng-container&gt;
       &lt;/mat-tab&gt;
   &lt;/mat-tab-group&gt;
  </code></pre>