Angular 10 Dynamically Added Components Breaking Tabs

Question

I have been tasked with overhauling the main page of our collection of web applications.

Currently we have inherited some other applications whose menu systems were bulky and pushed well past what we wanted for our user experience in terms of clicks and navigation.

I volunteered to do my best to turn our little circus into a SPA. I figured what I could do is load manage it so there was no more traditional navigation between apps and just dynamically load the apps right into the user's workspace.

For the most part this seems good; it's not perfect but works.

Then I noticed: we have a couple applications whose parent component is a component containing tabs. And the dynamic loader is not loading those tabs. In fact it is breaking the material tabs in almost any loaded component.

Loading Function:

injectDynamicComponent(componentName) {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentName);
        const containerRef = this.viewContainerRef;
        containerRef.clear();
        containerRef.createComponent(componentFactory);
       } 

Declaration And Constructor:

    @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: ViewContainerRef;
    @ViewChild('navGroup') navGroup: ElementRef;

    constructor(
        private uiService: UserInfoService,
        private phService: PageHeaderService,
        private aduserService: ADUserService,
        private menuService: MenuService,
        private viewContainerRef: ViewContainerRef,
        private componentFactoryResolver: ComponentFactoryResolver,
        private router: Router,
        private configService: ConfigsLoaderService,
        private renderer: Renderer2) {)

HTML for Injected Component:

        <div style="min-height:100%; max-width: 90% !important;">
          <div #dynamicInsert></div>
        </div>

Injected Component for Reference:

<div fxLayout="column" fxLayoutAlign="center" style="max-width: 90% !important;">
  <mat-tab-group mat-align-tabs="center">
    <mat-tab label="Call Tracker" *ngIf="isAgent || isLead || isSuper"><app-calltracker></app-calltracker></mat-tab>
    <mat-tab label="Call Report" *ngIf="isLead || isSuper"><app-callreport></app-callreport></mat-tab>
    <mat-tab label="Call Types" *ngIf="isSuper"><app-calltypes></app-calltypes></mat-tab>
  </mat-tab-group>
</div>

Above you can see no tabs loaded. Below you can see the tab loading. I am also currently in the process of changing the input types which is why they look different.

Answer 1

Try calling this.componentRef.changeDetectorRef.detectChanges(); after the component creation.