Angular(17.0)スピナーを実装する手順

Angular(17.0)スピナーを実装する手順

Angular(17.0)スピナーを実装する手順として、AngularMaterialの公式ページからコピーペーストすることで 簡単に実装することができます。今回はその手順をまとめていきます。

※AngularMaterialを実装する際にはnpmへAngularCliとAngularMaterialをインストールする必要があります。

まだnpmへインストールできていない方は以下手順を実施し、適宜インストールをお願いします。

• ・Angularを環境構築する方法
• ・AngularMaterialを環境構築する方法

環境

• ・Windows 10
• ・Angular 17.0
• ・VScode

今回の目標

以下のようなスピナー（ロード中などで使うパーツ）がサーバを立ち上げた時に表示されることです。

コンポーネントの作成します。

プロジェクトのディレクトリに移動し、ng generate component spinnerを実行してください。

実際に実行したときの画面。

PS C:\work\sample\my-app> ng generate component spinner
CREATE src/app/spinner/spinner.component.html (23 bytes)
CREATE src/app/spinner/spinner.component.spec.ts (626 bytes)
CREATE src/app/spinner/spinner.component.ts (250 bytes)     
CREATE src/app/spinner/spinner.component.css (0 bytes)      
PS C:\work\sample\my-app> 

VSCodeの画面でspinnerのCSS,HTML,TypeScriptのファイルが作成されていればOKです。

spinner.component.tsファイルの内容を編集する。

spinner.component.tsの内容を以下のように編集してください。 内容としては【MatProgressSpinnerModule】のインポート宣言の追加（2行を追加）をしています。

import { Component } from '@angular/core';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';//この行を追加


@Component({
  selector: 'app-spinner',
  standalone: true,
  imports: [MatProgressSpinnerModule],//MatProgressSpinnerModuleを追加
  templateUrl: './spinner.component.html',
  styleUrl: './spinner.component.css'
})
export class SpinnerComponent {

}

spinner.component.htmlファイルの内容を編集する。

spinner.component.htmlの内容を以下のように編集してください。

内容としては、スピナーのタグを追加をしています（2行目）。

<p>spinner works!</p>
<mat-spinner></mat-spinner>

app.component.tsファイルの内容を編集する。

spinner.component.htmlの内容を以下のように編集してください。 内容としては、スピナーのインポート宣言の追加をしています。

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { SpinnerComponent } from './spinner/spinner.component';//この行を追加

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, MatSlideToggleModule, SpinnerComponent],//この行にSpinnerComponentを追加
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-app';
}

app.component.htmlファイルの内容を編集する。

spinner.component.htmlの内容を以下のように編集してください。 内容としては、スピナーのタグを追加をしています。

～～上記は割愛します。ファイルの一番下に下記の記述があると思います。～～
<!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->


<router-outlet />

<!--スピナー追加-->
<app-spinner></app-spinner>

サーバーを起動します。 http://localhost:4200でブラウザからアクセスします。

C:\work\sample>cd my-app
C:\work\sample\my-app>
C:\work\sample\my-app>ng serve

Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  83.46 kB |
main.js             | main          |  22.09 kB |
styles.css          | styles        |  95 bytes |

                    | Initial Total | 105.64 kB

Application bundle generation complete. [3.494 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
                        

デフォルトの場合はhttp://localhost:4200 にアクセスし、以下の画面が表示されればサーバーの起動に成功しています。

確認出来たらCTRL + C でサーバーを終了します。

以上がAngular(17.0)でスピナーを追加する手順となります。

時間のかかる処理が入る際に、読み込み中をユーザにお知らせる為に実装してみると良いと思います。

ここまで読んでくださりありがとうございました。

参考資料