Loader

Implement a loader.component.tsfile:
import { Component } from '@angular/core';
import { Observable, debounce, timer, mergeMap } from 'rxjs';
import { ObserveService, ObserveStatus } from 'ngx-crud';
import { Store } from 'ngx-crud/observe/observe.interface';
​
@Component(
{
selector: 'app-loader',
styleUrls:
[
'./loader.component.scss'
],
templateUrl: './loader.component.html'
})
export class LoaderComponent implements OnInit
{
observeStatus$ : Observable<ObserveStatus> = this.getObserveStatus();
​
constructor(protected observeService : ObserveService)
{
}
​
protected getObserveStatus() : Observable<ObserveStatus>
{
return this.observeService
.observeAll()
.pipe(
mergeMap(value => (value.at(1) as Store).status),
debounce(observeStatus => timer(observeStatus === 'COMPLETED' ? 2000 : 0))
);
}
}
Implement a loader.component.htmlfile:
<div *ngIf="observeStatus$ | async as observeStatus"
[class.is-started]="observeStatus === 'STARTED'"
[class.is-completed]="observeStatus === 'COMPLETED'"
[class.is-errored]="observeStatus === 'ERRORED'"
class="component-loader"></div>
Implement a loader.compontent.scss file:
.component-loader
{
&.is-started
{
}
​
&.is-completed
{
}
​
&.is-errored
{
}
}
Last modified 16d ago