I am currently working on creating a dynamic tab system using Angular Material: Tabs. I have encountered an issue with loading content on tabs after the initial one, where the functionality only works when the first tab is loaded.
Below you can see the tab group structure. The tabs are generated from an array of 'tabs' received from a service. On the tab group, there is a change event that should dynamically load a component for the active tab when it changes.
<mat-tab-group *ngIf="tabs.length >= 1" #shiftplanningtabgroup (selectedTabChange)="selectedTabChange($event);">
<mat-tab *ngFor="let tab of tabs; let idx = index;" [disabled]="tab.disabled">
<ng-template mat-tab-label>
<div class="ava-mat-tab-label font-size-12" fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="center end">
<mat-checkbox [checked]="tab.active" [disabled]="tab.disabled" (change)="checkboxStateChange($event, idx);"></mat-checkbox>
<label class="cursor-pointer">{{ tab.label }}</label>
</div>
</ng-template>
<div class="tab-content">
<ng-template #tabHost></ng-template>
</div>
</mat-tab>
</mat-tab-group>
The event handler for 'selectedTabChange':
public selectedTabChange(event: MatTabChangeEvent): void {
this.loadTabContent(event.index);
}
The method 'loadTabContent':
private loadTabContent(index: number): void {
this.container.clear();
const factory = this.componentFactoryResolver.resolveComponentFactory(AvaShiftPlanningTabContentComponent);
const componentRef = this.container.createComponent<AvaShiftPlanningTabContentComponent>(factory);
(componentRef.instance as AvaShiftPlanningTabContentComponent).loading = true;
(componentRef.instance as AvaShiftPlanningTabContentComponent).tab = this.tabs[index];
(componentRef.instance as AvaShiftPlanningTabContentComponent).tabLoadingCompleted.subscribe((value: any) => {
this.tabLoadingComplete(value);
});
}
And the reference to #tabHost:
@ViewChild('tabHost', { read: ViewContainerRef }) container: ViewContainerRef;
This setup works perfectly fine for the first tab. However, when adding more than one tab, the subsequent tabs do not display any content even though the component is being accessed upon tab change. It seems like the content for the dynamically loaded component is not rendered properly.
Could this be a limitation of Angular Material: Tabs or could there be something wrong with the approach I am taking to load the component?