🍪

Angular Material Progress spinner 導入

2022/08/04に公開約5,300字

画面処理中を表すスピナーの表示/解除をAngular Materialを使って実現する方法を解説します。

Progress spinner とは

  • 画面処理中を表すくるくる回るやつです。
    image
    image

この記事の目的

  • Angular Material のProgress spinnerを組み込みます。

👇これより先は下記記事の内容を前提とします

Progress spinner の組み込み

サービスの作成

ng generate service loading

loading.service.ts

loading.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  subject = new Subject<string>();

  constructor() { }

  setLoading(strMessage: string): void {
    this.subject.next(strMessage);
  }

  unsetLoading(): void {
    this.subject.next('');
  }

}

Component追加

ng generate component spinner-sample

Material ProgressSpinner 導入

app.module.ts

app.module.ts
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 { SpinnerSampleComponent } from './spinner-sample/spinner-sample.component';

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';     // add
import {MatButtonModule} from '@angular/material/button';                        // add

@NgModule({
  declarations: [
    AppComponent,
    SpinnerSampleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatProgressSpinnerModule,   // add
    MatButtonModule,            // add
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ComponentとSpinnerの組み込み

app.component.ts

app.component.ts
import { Component,OnInit } from '@angular/core';

import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { LoadingService } from './loading.service';

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

  loading$: Observable<string> = this.loadingService.subject.asObservable();
  strMsg:string="";

  constructor(private loadingService: LoadingService) { }

  title = 'material.angular.github';

  ngOnInit(): void {
    this.loading$.subscribe(
      (value: string) => { this.strMsg=value; }
    );
  }
}

app.component.css

app.component.css
.loading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
  z-index: 1;
}

.loading-inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

mat-spinner {
  margin: 0 auto;
}

app.component.html

app.component.html
<div *ngIf="strMsg!==''" class="loading">
  <div class="loading-inner">
    <mat-spinner></mat-spinner>
    {{strMsg}}
  </div>
</div>

<app-spinner-sample></app-spinner-sample>

spinner-sample.component.ts

spinner-sample.component.ts
import { Component, OnInit } from '@angular/core';

import { LoadingService } from '../loading.service';

@Component({
  selector: 'app-spinner-sample',
  templateUrl: './spinner-sample.component.html',
  styleUrls: ['./spinner-sample.component.css']
})
export class SpinnerSampleComponent implements OnInit {

  constructor(private loadingService: LoadingService) { }

  ngOnInit(): void {
  }

  button_click(){
    this.showLoading("loading");
    setTimeout(() => {
      this.hideLoading();
    }, 2000);
  }

  showLoading(strMessage: string):void {
    this.loadingService.setLoading(strMessage);
  }

  hideLoading():void {
    this.loadingService.unsetLoading();
  }
}

spinner-sample.component.html

spinner-sample.component.html
<p>spinner-sample works!</p>
<button mat-stroked-button (click)="button_click()">Spinner!!!</button>

表示確認

ng serve --open

image
image

👇前提記事

👇関連記事

👇GitHubはこちら

👇参考URL

[keywords]
Angular Material progress Spinner

Angular Material Progress spinner 導入

Discussion

ログインするとコメントできます