title: Angular Material Tabs - Load/Unload components only when active tab is selected
body: <p>Given the following code of MainComponent.html:</p>
  
  <pre><code>&lt;mat-tab-group #tabGroup (selectedTabChange)="onTabClick($event)"&gt;
    &lt;mat-tab label="Users"&gt;
      &lt;!-- Active Tab. This tab is shown first --&gt;
      &lt;app-users&gt;&lt;/app-users&gt;
    &lt;/mat-tab&gt;
    &lt;mat-tab label="Managers"&gt;
      &lt;app-managers&gt;&lt;/app-managers&gt;
    &lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p>There are two components that are <strong>both</strong> loaded and ran when this view is called. i.e. the ngOnInit for the ManagersComponent (the inactive tab) is called. </p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  
  @Component({
      selector: 'app-managers',
      templateUrl: './managers.component.html',
      styleUrls: ['./managers.component.scss']
  })
  export class ManagersComponent implements OnInit, OnDestroy {
  
      constructor() { }
  
      ngOnInit() {
        //This is called when the MainComponent is loaded. 
      }
  
      ngOnDestroy() {
  
      }
  }
  </code></pre>
  
  <p>Is there a way to load and destroy components so that only the active tab is loaded, and the inactive tabs don't load until they are clicked, and destroyed when left? </p>
  
  <p>i.e. in the code snippet above the ngOnInit won't be loaded for ManagersComponent until the active tab is selected and when left the ngOnDestroy will be called </p>