Retrieve budget balance from backend

src/app/budgets/budget-details/budget-details.component.html

@@ -3,7 +3,7 @@
     <h2 class="balance">
       Current Balance: <br />
       <span
-        [ngClass]="{'income': getBalance() > 0, 'expense': getBalance() < 0}">{{ getBalance() / 100 | currency }}</span>
+        [ngClass]="{'income': budgetBalance > 0, 'expense': budgetBalance < 0}">{{ budgetBalance / 100 | currency }}</span>
     </h2>
     <app-category-breakdown [barChartLabels]="barChartLabels" [barChartData]="barChartData">
       </app-category-breakdown>

src/app/budgets/budget-details/budget-details.component.ts

@@ -18,6 +18,7 @@ import { Actionable } from '../../shared/actionable';
 export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
 
   budget: Budget;
+  public budgetBalance: number;
   public transactions: Transaction[];
   public expenses: Category[] = [];
   public income: Category[] = [];
@@ -84,15 +85,11 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
     ];
   }
 
-  getBalance(): number {
-    let totalBalance = 0;
-    if (!this.categoryBalances) {
-      return 0;
-    }
-    this.categoryBalances.forEach(balance => {
-      totalBalance += balance;
+  getBalance(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.twigsService.getBudgetBalance(id).subscribe(balance => {
+      this.budgetBalance = balance;
     });
-    return totalBalance;
   }
 
   getTransactions(): void {

src/app/shared/twigs.http.service.ts

@@ -71,6 +71,11 @@ export class TwigsHttpService implements TwigsService {
     return this.budgets;
   }
 
+  getBudgetBalance(id: string): Observable<number> {
+    return this.http.get<any>(`${this.apiUrl}/budgets/${id}/balance`, this.options)
+      .pipe(map(obj => obj.balance));
+  }
+
   getBudget(id: string): Observable<Budget> {
     return new Observable(emitter => {
       var cachedBudget: Budget

src/app/shared/twigs.local.service.ts

@@ -66,6 +66,13 @@ export class TwigsLocalService implements TwigsService {
     });
   }
 
+  getBudgetBalance(id: string): Observable<number> {
+    return new Observable(emitter => {
+      emitter.next(200);
+      emitter.complete()
+    })
+  }
+
   getBudget(id: string): Observable<Budget> {
     return new Observable(subscriber => {
       const budget = this.budgets.filter(it => {

src/app/shared/twigs.service.ts

@@ -14,6 +14,7 @@ export interface TwigsService {
   // Budgets
   getBudgets(): Observable<Budget[]>;
   getBudget(id: string): Observable<Budget>;
+  getBudgetBalance(id: string): Observable<number>;
   createBudget(
     id: string,
     name: string,