interaction with firebase by angular HttpClient

src/app/app.module.ts

@@ -15,6 +15,7 @@ import { EditAppareilComponent } from './edit-appareil/edit-appareil.component';
 import { UserService } from './services/user.service';
 import { UserListComponent } from './user-list/user-list.component';
 import { NewUserComponent } from './new-user/new-user.component';
+import { HttpClientModule } from '@angular/common/http';
 
 const appRoutes: Routes = [
     { path: 'appareils', canActivate: [AuthGuard], component: AppareilViewComponent },
@@ -43,6 +44,7 @@ const appRoutes: Routes = [
   imports: [
     BrowserModule,
     FormsModule,
+    HttpClientModule,
     ReactiveFormsModule,
     RouterModule.forRoot(appRoutes)
   ],

src/app/appareil-view/appareil-view.component.html

@@ -14,6 +14,10 @@ <h2>Mes appareils</h2>
                     (click)="onAllumer()">Tout allumer</button>
             <button class="btn btn-danger"
                     (click)="onEteindre()">Tout éteindre</button>
+            <button class="btn btn-primary"
+                    (click)="onSave()">Enregistrer les appareils</button>
+            <button class="btn btn-primary"
+                    (click)="onFetch()">Récupérer les appareils</button>
         </div>
     </div>
 </div>

src/app/appareil-view/appareil-view.component.ts

@@ -47,4 +47,12 @@ export class AppareilViewComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.appareilSubscription.unsubscribe();
   }
+
+  onSave() {
+    this.appareilService.saveAppareilsToServer();
+  }
+
+  onFetch() {
+    this.appareilService.getAppareilsFromServer();
+  }
 }

src/app/services/appareil.service.ts

@@ -1,26 +1,15 @@
 import { Subject } from 'rxjs/Subject';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
+@Injectable()
 export class AppareilService {
 
+    constructor(private httpClient: HttpClient) { }
+
     appareilsSubject = new Subject<any[]>();
 
-    private appareils = [
-        {
-            id: 1,
-            name: 'Machine à laver',
-            status: 'éteint'
-        },
-        {
-            id: 2,
-            name: 'Frigo',
-            status: 'allumé'
-        },
-        {
-            id: 3,
-            name: 'Ordinateur',
-            status: 'éteint'
-        }
-    ];
+    private appareils = [];
 
     emitAppareilSubject() {
         this.appareilsSubject.next(this.appareils.slice());
@@ -66,4 +55,31 @@ export class AppareilService {
         this.appareils.push(appareilObject);
         this.emitAppareilSubject();
     }
+
+    saveAppareilsToServer() {
+        this.httpClient
+          .put('https://angular-training-8da8c.firebaseio.com/appareils.json', this.appareils)
+          .subscribe(
+            () => {
+                console.log('Enregistrement terminé !');
+            },
+            (error) => {
+                console.log('Erreur ! : ' + error);
+            }
+          );
+    }
+
+    getAppareilsFromServer() {
+        this.httpClient
+          .get<any[]>('https://angular-training-8da8c.firebaseio.com/appareils.json')
+          .subscribe(
+            (response) => {
+                this.appareils = response;
+                this.emitAppareilSubject();
+            },
+            (error) => {
+                console.log('Erreur ! : ' + error);
+            }
+          );
+    }
 }