title: mat-tab lazy load tab only once
body: <p>I am using Angular Material mat-tab and it is set to lazy load the tabs content.</p>
  
  <p>Since the first tab is loaded by default I have set second tab to load lazily.</p>
  
  <p>I see that when I navigates between the tabs repeatedly, the second tab's content is loading freshly every time. I have a Web API call to get data and show in the tab content.</p>
  
  <p>So I want to avoid the Web API call every time the tab is selected. How can I achieve that?</p>
  
  <pre><code>&lt;mat-tab-group&gt;
    &lt;!--Roles Tab--&gt;
    &lt;mat-tab class="tabLabel" label="Roles"&gt;
      &lt;app-roles&gt;&lt;/app-roles&gt;
    &lt;/mat-tab&gt;
    &lt;!--Admins Tab--&gt;
    &lt;mat-tab class="tabLabel" label="Admins"&gt;
      &lt;!-- Lazy load below component --&gt;
      &lt;ng-template matTabContent&gt;
        &lt;app-admins&gt;&lt;/app-admins&gt;
      &lt;/ng-template&gt;
    &lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>