angular_observable

src/app/app.component.html

@@ -5,6 +5,9 @@
         <li routerLinkActive="active"><a routerLink="auth">Authentification</a></li>
         <li routerLinkActive="active"><a routerLink="appareils">Appareils</a></li>
       </ul>
+      <div class="navbar-right">
+        <p>Vous êtes connecté depuis {{ secondes }} secondes !</p>
+      </div>
     </div>
   </div>
 </nav>

src/app/app.component.ts

@@ -1,15 +1,37 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
+import 'rxjs/add/observable/interval';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, OnDestroy {
+
+    secondes: number;
+    counterSubscription: Subscription;
 
     constructor() {
     }
 
     ngOnInit() {
+        const counter = Observable.interval(1000);
+        this.counterSubscription = counter.subscribe(
+            (value) => {
+                this.secondes = value;
+            },
+            (error) => {
+                console.log('Uh-oh, an error occurred! : ' + error);
+            },
+            () => {
+                console.log('Observable complete!');
+            }
+        );
+    }
+
+    ngOnDestroy() {
+        this.counterSubscription.unsubscribe();
     }
 }

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

@@ -1,15 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { AppareilService } from '../services/appareil.service';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'app-appareil-view',
   templateUrl: './appareil-view.component.html',
   styleUrls: ['./appareil-view.component.scss']
 })
-export class AppareilViewComponent implements OnInit {
+export class AppareilViewComponent implements OnInit, OnDestroy {
 
-  isAuth = false;
   appareils: any[];
+  appareilSubscription: Subscription;
 
   lastUpdate = new Promise((resolve, reject) => {
     const date = new Date();
@@ -20,14 +21,15 @@ export class AppareilViewComponent implements OnInit {
     );
   });
 
-  constructor(private appareilService: AppareilService) {
-    setTimeout(() => {
-      this.isAuth = true;
-    }, 3000);
-  }
+  constructor(private appareilService: AppareilService) { }
 
   ngOnInit() {
-    this.appareils = this.appareilService.appareils;
+    this.appareilSubscription = this.appareilService.appareilsSubject.subscribe(
+        (appareils: any[]) => {
+          this.appareils = appareils;
+        }
+    );
+    this.appareilService.emitAppareilSubject();
   }
 
   onAllumer() {
@@ -42,4 +44,7 @@ export class AppareilViewComponent implements OnInit {
     }
   }
 
+  ngOnDestroy() {
+    this.appareilSubscription.unsubscribe();
+  }
 }

src/app/services/appareil.service.ts

@@ -1,5 +1,10 @@
+import { Subject } from 'rxjs/Subject';
+
 export class AppareilService {
-    appareils = [
+
+    appareilsSubject = new Subject<any[]>();
+
+    private appareils = [
         {
             id: 1,
             name: 'Machine à laver',
@@ -17,6 +22,10 @@ export class AppareilService {
         }
     ];
 
+    emitAppareilSubject() {
+        this.appareilsSubject.next(this.appareils.slice());
+    }
+
     switchOnAll() {
         for (let appareil of this.appareils) {
             appareil.status = 'allumé';