【Angular】Angular Materialでのローディングスピナー

$ ng new loading-spinner

$ ng add @angular/material

$ ng generate component spinner

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SpinnerComponent } from './spinner/spinner.component';

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

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

<div>
  <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
</div>

<button (click)="click()">click</button>

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

import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { SpinnerComponent } from './spinner/spinner.component';

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

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

  constructor(private overlay: Overlay) { }

  click() {
    this.overlayRef.attach(new ComponentPortal(SpinnerComponent));

    setTimeout(() => {
      this.overlayRef.detach();
    }, 3000);
  }
}

$ ng serve