2.13 Loading Service Reactive Design

Author: webdevtut

src/app/loading.service.ts

@@ -1,6 +1,21 @@
 import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
 
 @Injectable() //not provided in root
 export class LoadingService {
 
+    loading$ : Observable<boolean>;
+
+    showLoaderUntilCompleted<T>(obs$ : Observable<T>) : Observable<T>{
+        return undefined
+    }
+
+    loadingOn(){
+        
+    }
+
+    loadingOff(){
+
+    }
+
 }

src/app/loading/loading.component.html

@@ -1,4 +1,4 @@
 
-<div class="spinner-container">
+<div class="spinner-container" *ngIf="loadingService.loading$ | async">
     <mat-spinner></mat-spinner>
 </div>

src/app/loading/loading.component.ts

@@ -10,7 +10,7 @@ import { LoadingService } from '../loading.service';
 export class LoadingComponent implements OnInit {
 
 
-  constructor(private loadingService: LoadingService) {
+  constructor(public loadingService: LoadingService) {
 
   }