Within an Angular material tab group, I have a collection of tabs where each one triggers the method setGridHeight in every individual component (tab).
<mat-tab-group [dynamicHeight]="true" (selectedTabChange)='queue0.setGridHeight();queue1.setGridHeight();queue2.setGridHeight();'>
<mat-tab *ngIf='showQueues[0]'>
<ng-template mat-tab-label>
<i class="fa fa-share-square" routerLink="/queue/0" style="color: rgb(8, 148, 148)"></i>Queue 0
</ng-template>
<fph-queue-0 #queue0 [rowData]="queue0Items$ | async">
</fph-queue-0>
</mat-tab>
<mat-tab *ngIf='showQueues[1]'>
<ng-template mat-tab-label>
<i class="fa fa-share-square" routerLink="/queue/1" style="color: rgb(8, 148, 148)"></i>Queue 1
</ng-template>
<fph-queue-1 #queue1 [rowData]="queue1Items$ | async">
</fph-queue-1>
</mat-tab>
<mat-tab *ngIf='showQueues[2]'>
<ng-template mat-tab-label>
<i class="fa fa-share-square" routerLink="/queue/2" style="color: rgb(8, 148, 148)"></i>Queue 2
</ng-template>
<fph-queue-2 #queue2 [rowData]="queue2Items$ | async">
</fph-queue-2>
</mat-tab>
</mat-tab-group>
In every component's TypeScript code, I am invoking a method named setGridHeight upon tab change.
The challenge arises when I control component rendering through *ngIf; the call to selectedtabChange results in an error since it attempts to invoke a method on an unrevealed component (unrendered tab).
How can I adjust the call to target only methods from currently rendered components (tabs)?
For example:
showQueues = [true, false, true];showQueues[1] = false, causing it not to be rendered and consequently leading to an exception when queue1.setGridHeight() is invoked:
Cannot read property 'setGridHeight' of undefined