3

I used Angular Material's tab to create a tab with many forms. Demo

Since it takes a long time to navigate to these heavy tabs, I wanted to show a dialog that the tabs are loading. However, with the "click" or "selectedTabChange" event of mat-tab-group, the screen freezes before the dialog appears, and the dialog appears only after the tab is moved.

<md-tab-group (click)="openDialog()">
  <md-tab label="light-page1">
    <app-light-page></app-light-page>
  </md-tab>
  <md-tab label="heavy-page">
    <app-heavy-page></app-heavy-page>
  </md-tab>
  <md-tab label="light-page2">
    <app-light-page></app-light-page>
  </md-tab>
</md-tab-group>

Is it possible to make the screen freeze with Loading displayed when moving to a heavy tab?

2
  • 1
    are you using Angular 2.0???? from Angular 7 allow cdk-virtual-scroll-view and I think that this should be your aproach -really to have at time 10000 "inputs" is really heavy you has in tabs or not
    – Eliseo
    Jul 8, 2021 at 7:13
  • I used cdk-virtual-scroll-view and it worked! Thanks for the radical solution.
    – hannahanna
    Jul 11, 2021 at 5:28

1 Answer 1

0

I redesigned the page using cdk-virtual-scroll-view link to reduce the loading time.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.