projects/ng-loading-indicator/src/lib/components/loading-indicator.component.ts
This component listens for load start and load end events and
shows / hides a loading indicator accordingly. It's intended
to be placed in the template of the application's root component
so that one instance of the component can be used throughout the
entire application.
selector | nli-loading-indicator |
styleUrls | loading-indicator.component.css |
templateUrl | loading-indicator.component.html |
loadingMessageClass
|
Custom CSS class(es) to apply to the loading message |
modalClass
|
Custom CSS class(es) to apply to the modal |
overlayClass
|
Custom CSS class(es) to apply to the overlay |
spinnerClass
|
Custom CSS class(es) to apply to the spinner |
constructor(loadingIndicatorService: LoadingIndicatorService)
|
Private onLoadStarted |
onLoadStarted(loadingMessage: string)
|
Show the loading indicator and set the provided loading message for template binding
Returns:
void
|
Private onLoadEnded |
onLoadEnded()
|
Hide the loading indicator and clear the loading message
Returns:
void
|
Private _loadingMessage |
_loadingMessage: |
loadingIndicatorModal |
loadingIndicatorModal: |
Public loadingMessage |
loadingMessage: |
Loading message to bind to the loading modal window |
Private subLoadEnded |
subLoadEnded: |
Private subLoadStarted |
subLoadStarted: |
import { Component, OnInit, OnDestroy, ViewChild, Input } from '@angular/core';
import { LoadingIndicatorService } from '../services/loading-indicator.service';
import { Subscription } from 'rxjs';
import { ModalWindowComponent } from '@browninglogic/ng-modal';
/** This component listens for load start and load end events and
* shows / hides a loading indicator accordingly. It's intended
* to be placed in the template of the application's root component
* so that one instance of the component can be used throughout the
* entire application. */
@Component({
selector: 'nli-loading-indicator',
templateUrl: './loading-indicator.component.html',
styleUrls: ['./loading-indicator.component.css']
})
export class LoadingIndicatorComponent implements OnInit, OnDestroy {
constructor(private loadingIndicatorService: LoadingIndicatorService) {}
/** Custom CSS class(es) to apply to the modal*/
@Input() modalClass = '';
/** Custom CSS class(es) to apply to the overlay*/
@Input() overlayClass = '';
/** Custom CSS class(es) to apply to the loading message*/
@Input() loadingMessageClass = '';
/** Custom CSS class(es) to apply to the spinner*/
@Input() spinnerClass = '';
@ViewChild('loadingIndicatorModal', { static: true }) loadingIndicatorModal: ModalWindowComponent;
private _loadingMessage: string;
private subLoadStarted: Subscription;
private subLoadEnded: Subscription;
/** Loading message to bind to the loading modal window */
public get loadingMessage(): string {
return this._loadingMessage;
}
ngOnInit() {
// Subscribe to the relevant events in order to show and hide the modal
this.subLoadStarted = this.loadingIndicatorService.loadStarted.subscribe(loadingMessage => this.onLoadStarted(loadingMessage));
this.subLoadEnded = this.loadingIndicatorService.loadEnded.subscribe(() => this.onLoadEnded());
}
ngOnDestroy() {
if (this.subLoadStarted) { this.subLoadStarted.unsubscribe(); }
if (this.subLoadEnded) { this.subLoadEnded.unsubscribe(); }
}
/** Show the loading indicator and set the provided loading message for template binding */
private onLoadStarted(loadingMessage: string) {
this._loadingMessage = loadingMessage;
this.loadingIndicatorModal.show();
}
/** Hide the loading indicator and clear the loading message */
private onLoadEnded() {
this._loadingMessage = null;
this.loadingIndicatorModal.hide();
}
}