Centralized state management without BehaviorSubject.

plain-change-detection/src/app/counter/counter.component.ts

@@ -1,42 +1,29 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component} from '@angular/core';
 import { CounterService } from '../services/counter.service';
 
 @Component({
   selector: 'app-counter',
   templateUrl: './counter.component.html',
   styleUrls: ['./counter.component.css']
 })
-export class CounterComponent implements OnInit, OnDestroy {
+export class CounterComponent {
 
   constructor(private counter: CounterService) { }
 
-  currentCount: number;
-  subscription;
-
-  ngOnInit(): void {
-    this.subscription = this.counter.getCount().subscribe(
-      res => {
-        this.currentCount = res.value;
-      },
-      err => {
-        console.error(`An error occurred: ${err.message}`);
-      }
-    );
+  get currentCount() {
+    return this.counter.currentCount.value;
   }
 
   increment(): void {
-    this.counter.setCount(this.currentCount, 1);
+    this.counter.applyDelta(1);
   }
 
   decrement(): void {
-    this.counter.setCount(this.currentCount, -1);
+    this.counter.applyDelta(-1);
   }
 
   reset(): void {
     this.counter.resetCount();
   }
 
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
 }

plain-change-detection/src/app/output/output.component.ts

@@ -1,32 +1,19 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { CounterService } from '../services/counter.service';
-import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'app-output',
   templateUrl: './output.component.html',
   styleUrls: ['./output.component.css']
 })
-export class OutputComponent implements OnInit, OnDestroy {
+export class OutputComponent {
 
   constructor(private counter: CounterService) { }
 
   @Input() text: string;
-  currentCount: number;
-  subscription;
 
-  ngOnInit(): void {
-    this.subscription = this.counter.getCount().subscribe(
-      res => {
-        this.currentCount = res.value;
-      },
-      err => {
-        console.error(`An error occurred: ${err.message}`);
-      }
-    );
+  get currentCount() {
+    return this.counter.currentCount.value;
   }
 
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
 }

plain-change-detection/src/app/services/counter.service.ts

@@ -11,25 +11,14 @@ export class CounterService {
 
   constructor() { }
 
-  private initialCount: Count = {value: 0};
-  private countTracker = new BehaviorSubject<Count>(this.initialCount);
+  currentCount: Count = {value: 0};
 
-  /** Allows subscription to the behavior subject as an observable */
-  getCount(): Observable<Count> {
-    return this.countTracker.asObservable();
-  }
-
-  /**
-   * Allows updating the current value of the behavior subject
-   * @param val a number representing the current value
-   * @param delta a number representing the positive or negative change in current value
-   */
-  setCount(val: number, delta: number): void {
-    this.countTracker.next({value: (val + delta)});
+  applyDelta(delta: number): void {
+    this.currentCount = {value: (this.currentCount.value + delta)};
   }
 
   /** Resets the count to the initial value */
   resetCount(): void {
-    this.countTracker.next(this.initialCount);
+    this.currentCount = {value: 0};
   }
 }