ngx-angular-loading
v1.0.4
Published
An angular component that lets you to prevent user interaction with part of the page and display loading/busy indicator (spinner based on spin.js)
Downloads
165
Maintainers
Readme
NGX Angular Loading
It is a library to makes loading screens easier in Angular (2+)
Credits
This project was seeded by https://github.com/darthwade/angular-loading because the author was not responding to pull requests so decided to take what they had started and update and run with it. Along the way we put some of our own opinions on it and added some tests, enough changes that it stopped being a viable PR for the original without serious breaking changes.
Migrating from angularjs dwloading
Markup:
From AngularJS
<div dwLoading="updating" [dwLoadingOptions]="spinnerConfig">
To Angular 2+
<div ngxLoading="updating" [loadingOptions]="spinnerConfig">
Installation
npm install ngx-angular-loading
Step 1. Import the 'NGXLoadingModule' module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NGXLoadingModule } from 'ngx-angular-loading';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NGXLoadingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 2. Include NGXLoadingService in your component
Use the service to start and finish the different loading screens You may use $loading for legacy or rename your references to ngxLoadingService
import { Component } from '@angular/core';
import { NGXLoadingService } from 'ngx-angular-loading';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ngx-angular-loading demo';
isLoading = false;
public spinnerConfig: any;
constructor(private $loading: NGXLoadingService) {
this.spinnerConfig = {
text: 'Loading...',
spinnerOptions: {
color: '#0078D2'
}
};
}
public onButtonClick() {
this.isLoading
? this.$loading.finish('updating')
: this.$loading.start('updating');
this.isLoading = !this.isLoading;
}
}