Angular 2 - Show loading-information when (observableData | async) is not yet resolved

Question

just as the title says, I want to embrace the power of rxjs Observables.

What I do now:

// dataview.html
Loading data         


        
      

Answer 1

This is how I do it. Also i use $ at the and of the variable name to remind me that it is a stream.

// dataview.html
Loading data...

    
{{ d.value }}



// dataview.ts

data: any[] = [];
isLoading$: BehaviorSubject = new BehaviorSubject(false);

getData() {

this.isLoading$.next(true);

this._api.getData().subscribe(
        data => {
            this.data = data;
        },
        error => {
            this.error = error;
        },
        complete => {
            this.isLoading$.next(false);
        });
}