title: Angular: Calling SelectedTabChange only for rendered tabs
body: <p>I have a group of tabs in Angular material tab group as below and calling a method <code>setGridHeight</code> in <strong>every component ( every tab )</strong>.</p>
  
  <pre><code>&lt;mat-tab-group [dynamicHeight]="true" (selectedTabChange)='queue0.setGridHeight();queue1.setGridHeight();queue2.setGridHeight();'&gt;
    &lt;mat-tab *ngIf='showQueues[0]'&gt;
      &lt;ng-template mat-tab-label&gt;
        &lt;i class="fa fa-share-square" routerLink="/queue/0" style="color: rgb(8, 148, 148)"&gt;&lt;/i&gt;Queue 0
      &lt;/ng-template&gt;
      &lt;fph-queue-0 #queue0 [rowData]="queue0Items$ | async"&gt;
      &lt;/fph-queue-0&gt;
    &lt;/mat-tab&gt;
    &lt;mat-tab *ngIf='showQueues[1]'&gt;
      &lt;ng-template mat-tab-label&gt;
        &lt;i class="fa fa-share-square" routerLink="/queue/1" style="color: rgb(8, 148, 148)"&gt;&lt;/i&gt;Queue 0
      &lt;/ng-template&gt;
      &lt;fph-queue-1 #queue1 [rowData]="queue1Items$ | async"&gt;
      &lt;/fph-queue-1&gt;
    &lt;/mat-tab&gt;
    &lt;mat-tab *ngIf='showQueues[2]'&gt;
      &lt;ng-template mat-tab-label&gt;
        &lt;i class="fa fa-share-square" routerLink="/queue/2" style="color: rgb(8, 148, 148)"&gt;&lt;/i&gt;Queue 0
      &lt;/ng-template&gt;
      &lt;fph-queue-2 #queue2 [rowData]="queue2Items$ | async"&gt;
      &lt;/fph-queue-2&gt;
    &lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p>So in the TS code in every component I am calling a method called <strong>setGridHeight</strong> which is called on tab change. </p>
  
  <p>The issue is if I control the components redering through <code>*ngIf</code>, the <code>selectedtabChange</code> call throws an error ( since it cant call a method of an unrendered component( unrendered tab) ) </p>
  
  <p>How do I then change the call to only methods from only rendered components ( tabs ).</p>
  
  <p>for ex:
  <code>showQueues = [true, false, true];</code></p>
  
  <p><code>showQueues[1] = false</code>
  and is not rendered and thus <code>queue1.setGridHeight()</code> throws an exception
  <code>Cannot read property 'setGridHeight' of undefined</code>.</p>