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が実行されます。
他にも便利なモジュールがたくさんあるので、いろいろと使ってみたいと思います。
【関連記事】
3分で構築するRuby on Rails開発環境
続・3分で構築するRuby on Rails開発環境~MySQL設定編~
フラットデザインとレスポンシブデザイン
「Cloudera World Tokyo 2014」に行ってきました
Code Avengers(コードアベンジャーズ)
paizaでスキルチェック ~オンラインハッカソンに挑戦~
そしてスーパープログラマーへ
Hackmeに挑戦!
Railsで作るAPI
Ruby on Rails -turnout-
Ruby on Rails -migration-
Windows 10にアップグレードしてみました
Windows 神モード
Ruby on rails -slim-
WindowsでVimを使う(1)
「Cloudera World Tokyo 2015」に行ってきました
Ruby on Rails -gitignore.io-
Windowsでパッケージ管理
プログラミング言語を武器に例えると
Vagrantで開発環境構築
ワンライナーでWebサーバ起動
Vim like in Chrome
mailcatcher – インストール編
mailcatcher – 設定編
mailcatcher – API編
tigを使ってみました
NodeSchoolに入学
Vim Bootstrapを使ってみる
ギットクエストやってみました
VIM Adventures -LEVEL 1-
VIM Adventures -LEVEL 2-
VIM Adventures -LEVEL 3-
Python -インストール編
Python -パッケージ管理
Python -dateutils-
Python -itertools-
Python -retry-
Python -argparse-
Angular -環境構築編-
Angular -Material-
- 2018年03月19日
- CATEGORY- 1. 技術力{技術情報}