[SOLVED] mat-tab component is lagging when data inside one tab is huge. How can we solve that?

mat-tab component is lagging when data inside one tab is huge. How can we solve that?

I'm using mat-tab in angular 10, and the components are rendering dynamically using ComponentFactoryResolver and pushing components in array using this method.

for ex: 
componentArr.push(this.insertComponent(ProfileComponent));
componentArr.push(this.insertComponent(DataComponent));
componentArr.push(this.insertComponent(PaymentComponent));

private insertComponent<T>(component: any): T {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory<T>(component);
    return this.tabHost.viewContainerRef.createComponent<T>(componentFactory).instance;
  }

Now I have one component which has very large data and it is making mat-tab lag while switching the tabs.

Which different approach should I try for this?

Solution

Sharing my approach after I solved this particular problem. Here in my case I was having a lot of HTML data which caused lagging issue for Mat-tab.

To solve this, I divided the data into sections and used mat-expansion-panel and by default kept all sections collapsed so the HTML of the mat-tab component was reduced and when I expand a specific section, only the required HTML will be displayed.

Note: mat-expansion-panel by default sets the property of inner content as 'display: none' which does not removes the html from DOM. Rather add your html conditionally on click on expansion panel.

I was using 'ngIF' in angular to not to include html in DOM.