Angular - Dynamic component in mat-tab

Question

I have a mat-tab-group (angular material) and I want to be able to add from code behind mat-tabs including other components. I am using ComponentFactoryResolver to create the component but I am not able to add the new component to the new mat-tab through the ViewContainerRef

html

<mat-tab-group>
 <mat-tab *ngFor="let tab of tabs"  [label]="tab.title">
  <div #test></div>
 </mat-tab>
</mat-tab-group>

code behind

private open(type:string):void{
 var tab = {title:'test'};
 this.tabs.push(tab);

 const factory = this.componentFactoryResolver.resolveComponentFactory(DiscountGridComponent );
 //this will add it in the end of the view
 const newComponentRef = this.viewContainerRef.createComponent(factory);
}

Answer 1

Update 2022, Angular v14 but applicable to lower versions as well.

@LeonardoRick solution is very proper.

Nevertheless, there is another solution, more adequate to Angular docs official example for dynamic component loader (link to docs).

So, there is proposal to make a usage of directive, which has defined viewContainerRef.

import { Directive, ViewContainerRef } from '@angular/core';

    @Directive({
      selector: '[adHost]',
    })
    export class AdDirective {
      constructor(public viewContainerRef: ViewContainerRef) { }
    }

This directive in a component is defined with ViewChild:

  @ViewChild(AdDirective, {static: true}) adHost!: AdDirective;

---

So, how to apply above solution to asked question and render multiple dynamic components?

Solution:
Directive keeps the same. However in component, instead of using ViewChild there will used ViewChildren and QueryList as above:

  @ViewChildren(AdComponentDirective) _adComponentDirective: QueryList<AdComponentDirective>;

Due to usage of QueryList there must be applied also ngAfterViewInit lifecycle hook cuz right then the QueryList is ready and loaded. Have a closer look at populateViewContainersWithComponents method, in which is dynamic components assignment to tabs.

export class AdminTabsComponent implements AfterViewInit {
@ViewChildren(AdComponentDirective) adComponentDirective!: QueryList<AdComponentDirective>;

    @Input() tabsInfo: TabsInfoModel;

    constructor(private cdr: ChangeDetectorRef) {}

    ngAfterViewInit(): void {
        this.populateViewContainersWithComponents();
    }

    private populateViewContainersWithComponents(): void {
        this._dynamicComponentDirective.toArray().forEach((container, index) => {
      container.viewContainerRef.createComponent(this.tabs[index].component);
    });
        this.cdr.detectChanges();
    }
}

In the template:

<mat-tab-group>
  <mat-tab *ngFor="let item of tabs; index as i" label="{{ item.label }}">
    <ng-template adHost></ng-template>
  </mat-tab>
</mat-tab-group>


    

Answer 2

Wanted to share what I came up with, in case it helps anyone else:

export class DynamicTabComponent implements AfterViewInit {
    public tabs = [ComponentOne, ComponentTwo];

    @ViewChild('container', {read: ViewContainerRef, static: false}) public viewContainer: ViewContainerRef;

    constructor(private componentFactoryResolver: ComponentFactoryResolver) {
    }

    public ngAfterViewInit(): void {
        this.renderComponent(0);
    }

    public tabChange(index: number) {
        setTimeout(() => {
            this.renderComponent(index);
        });
    }

    private renderComponent(index: number) {
        const factory = this.componentFactoryResolver.resolveComponentFactory(this.components[index]);
        this.viewContainer.createComponent(factory);
    }
}

Template:

<mat-tab-group (selectedIndexChange)="tabChange($event)">
    <mat-tab label="Tab" *ngFor="let component of components">
        <ng-template matTabContent>
            <div #container></div>
        </ng-template>
    </mat-tab>
</mat-tab-group>

Answer 3

I also replaced the BrowserAnimationsModule and used NoopAnimationsModule instead.

    export class DynamicTabComponent implements AfterViewInit {
    public tabs = [ComponentOne, ComponentTwo];

    @ViewChild('container', {read: ViewContainerRef, static: false}) public 
    viewContainer: ViewContainerRef;

    constructor(private componentFactoryResolver: ComponentFactoryResolver) {
    }

    public ngAfterViewInit(): void {
    this.renderComponent(0);
    }

    public tabChange(index: number) {
    setTimeout(() => {
        this.renderComponent(index);
    });
    }

    private renderComponent(index: number) {
    const factory = 
this.componentFactoryResolver.resolveComponentFactory(this.components[index]);
this.viewContainer.createComponent(factory);
}
}

The Template

    <mat-tab label="Tab" *ngFor="let component of components">
    <ng-template matTabContent>
        <div #container></div>
    </ng-template>
    </mat-tab>
    </mat-tab-group>

The Module

 imports: [
  CommonModule,
  MaterialModuleSet,
  BrowserModule,
  RouterModule.forRoot(routes),
  AppRoutingModule,
  NoopAnimationsModule
// BrowserAnimationsModule]        removed the BrowserAnimationModule

Answer 4

On angular 13 its quite simpler because you don't need to inject the componentFactory service anymore.

My solution was to use a ViewChildren and create the components inside the tabs right on the component ngAfterViewInit html:

<mat-tab-group>
    <mat-tab *ngFor="let item of tabs [label]="item.label">
        <div #tabContainer></div>
    </mat-tab>
</mat-tab-group>

ts

export class AdminTabsComponent implements AfterViewInit {
    @ViewChildren('tabContainer', { read: ViewContainerRef }) public tabContainerList: QueryList<ViewContainerRef>;

    @Input() tabsInfo: TabsInfoModel;

    constructor(private cdr: ChangeDetectorRef) {}

    ngAfterViewInit(): void {
        this.populateViewContainersWithComponents();
    }

    private populateViewContainersWithComponents(): void {
        this.tabContainerList.toArray().forEach((container, index) => {
            container.createComponent(this.tabs[index].component);
        });
        this.cdr.detectChanges();
    }
}