'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?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

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

Sources

Related Questions