78057
Angular Materialのtabを使用して、多くのFormをもつタブを作成しました。  
[Demo](https://stackblitz.com/edit/angular-material-aanv2p?)

この重いタブへの移動時に時間がかかることから、Loading中である旨のダイアログを出したいとおもったのですが、  
以下のように`mat-tab-group`のクリックイベントでは、ダイアログが表示される前に画面がフリーズしてしまい、  
タブの移動後にダイアログが出るようになってしまします。

```

    <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>
    
```

重いタブへの移動時にLoadingを表示した状態で画面がフリーズするようにはできませんでしょうか？
CC BY-SA 4.0
2021-07-08T02:49:28.750
78038
2021-07-08T15:25:14.647
24942
question
angular angular-material
Angularで重いタブへの移動時にLoadingを差し込みたい
一度に表示する量を制御したほうがいいです

フォークして修正したものです  
<https://stackblitz.com/edit/angular-material-p6xtfm?file=app%2Fheavy-
page%2Fheavy-page.component.ts>

1度に1万のinputをレンダリングするのはとても重いのでintervalで小分けに表示するようにしました

```

    const interval = setInterval(() => {
          for (let i = 1; i < 100; i++) {
            this.hformGroups.push(
              this.fb.group({
                val: [index * 100 + i]
              })
            );
          }
          index++;
          if (index > 100) {
            clearInterval(interval);
          }
        }, 300);
    
```

**追記**  
`md-tab-group` は最初にタブページを開いた時点でlight-page1、heavy-page, ight-
page2のレンダリングを開始します。これは各タブページのngInitにログを出力すると振る舞いがわかると思います

このため単にローディング表示をしたいだけなら、タブクリックのタイミングでngIfを使いタブページを表示するような制御をしてもうまくいくと思います
CC BY-SA 4.0
2021-07-08T15:03:11.583
78057
2021-07-08T15:25:14.647
2021-07-08T15:25:14.647
298
298
78038
answer