Angular Materialでローディング（処理中）を実装する

2022/3/22 追記

@angular/material": "13.2.6" ではこの記事のコードではローディングが表示されない。
原因はこの コミット で MatSpinner クラスが消えたからっぽい。

MatSpinner クラスは消えたが mat-spinner タグは使えるので、自前で MatSpinner コンポーネントを実装して、ComponentPortal に渡すようにする必要がある。

progress-spinner.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-progress-spinner',
  template: '<mat-spinner></mat-spinner>',
})
export class ProgressSpinnerComponent {}

---

Angular Materialでローディング（処理中）を実装するには、Progress spinnerとOverlayを使う。

まず、Angular Materialをインストールする。

ng add @angular/material

実装はこんな感じ。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// 追加
import { MatProgressSpinnerModule, MatSpinner } from '@angular/material/progress-spinner';
import { OverlayModule } from '@angular/cdk/overlay';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatProgressSpinnerModule, // 追加
    OverlayModule             // 追加
  ],
  // 追加
  entryComponents: [
    MatSpinner
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { MatSpinner } from '@angular/material/progress-spinner';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'sample-progress-spinner';

  overlayRef = this.overlay.create({
    hasBackdrop: true,
    positionStrategy: this.overlay
      .position().global().centerHorizontally().centerVertically()
  });

  constructor(
    private overlay: Overlay
  ) { }

  ngOnInit() {
    // ローディング開始
    this.overlayRef.attach(new ComponentPortal(MatSpinner));
    setTimeout(() => {
      // ローディング終了
      this.overlayRef.detach();
    }, 3000);
  }
}

画面はこんな感じ。

Overlayを使えばHTMLは特にいじらずにローディングを実装することができる。