Angular - Dynamic component in mat-tab

4
votes

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);
}
2
angularangular-materialangular-dynamic-components
I'm not sure I understand your question. Why not just add the components you need with their directive? i.e. <app-component></app-component> – Kyle Krzeski
I am going to have a menu and I will open new tabs with different components according to what it has been selected from the menu. – stathis ts

2 Answers

4
votes

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>
0
votes

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