Angular -loading-

2018年03月19日
CATEGORY- 1. 技術力｛技術情報｝

今回はAngularのモジュールのひとつである「ngx-loading」を使ってみたいと思います。

■ngx-loading
https://www.npmjs.com/package/ngx-loading

■Install ngx-loading
まずはnpmを使ってngx-loadingをインストールします。

npm install --save ngx-loading

インストールが終わったら、app.module.tsにモジュールを追加します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material';
import { LoadingModule } from 'ngx-loading'; // add

import { AppComponent } from './app.component';

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

次に、app.component.tsを下記のように修正します。

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

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent {
  
	public loading = false;
	doSubmit() {
		this.loading = true;
		// do something
	}
}

※処理が終わったところで「loading = false」に設定するとloadingが終了します。

最後にapp.component.htmlにngx-loadingのタグを設定します。

<div class="my-container">
    <ngx-loading [show]="loading"></ngx-loading>
</div>

<h2 class="example-h2">Loading Sample</h2>
<div class="button-row">
  <button mat-raised-button color="accent" (click)=doSubmit()>Submit</button>
</div>

これで画面にアクセスして「Submit」をクリックすると。

このようにLoadingが実行されます。

他にも便利なモジュールがたくさんあるので、いろいろと使ってみたいと思います。

2018年03月19日
CATEGORY- 1. 技術力｛技術情報｝

Angular -loading-

CATEGORY

LATEST ENTRY

チームで仕事をする、フォローをしあうという事

ゴールなんて無いことを「永遠のゼロ」から学ぶ

他者から学ぶ姿勢

Failure is another stepping stone to greatness.

事務所のブレーカー落ちを解決した話(2)

TAG