import { Component, OnInit } from '@angular/core';
import { HomeService } from './service/home.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  itemCount: number = 0;
  todo = [];
  addingVar: Object;
  dueDate: string;
  constructor(private homeService: HomeService) { }

  ngOnInit() {
    let ltodo = []; // ADDED THIS TO FORCE VALUE STORAGE
    this.homeService.getToDo().subscribe(
      function(response) {
        ltodo = response;
      },
      function(error) { console.log('Error happened', error); },
      function() { }
    );
    setTimeout(function(){ // <-HACK TO FORCE IT TO STORE DATA AT LEAST WITHIN "ngOnInit"
                           // I'LL USE A DEBOUNCED FUNCTION INSTEAD LATER
      this.todo = ltodo;
      this.itemCount = this.todo.length;
      console.log(this.todo);      // <- (array of 9 objects) works!!
      console.log(this.itemCount); // <- 9                    works!!
    }, 10);
  }

  addItem() {
    console.log(this.todo); // <- this.todo IS NOW EMPTY ARRAY! WHY??
    this.addingVar = {name: this.todoTitle, description: this.todoText, date: Date.now(), dueDate: this.dueDate };
    console.log(this.addingVar);
    this.homeService.postToDo(this.addingVar).subscribe(
      function(response) { console.log('Success Response', response); },
      function(error) { console.log('Error happened', error); },
      function() { }
    );
  }
}

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class HomeService {
  constructor (
    private http: Http
  ) {}
  getToDo() {
      return this.http.get(`http://localhost:3000/todos`)
        .map((res: Response) => res.json());
  }
  getToDoId(id: string) {
    return this.http.get(`http://localhost:3000/todos/${id}`)
      .map((res: Response) => res.json());
  }
  postToDo(body: object) {
    return this.http.post(`http://localhost:3000/todos`, body)
      .map((res: Response) => res.json());
  }
  putToDoId(id: string, body: object) {
    return this.http.put(`http://localhost:3000/todos/${id}`, body)
      .map((res: Response) => res.json());
  }
  deleteToDoId(id: string) {
    return this.http.delete(`http://localhost:3000/todos/${id}`)
      .map((res: Response) => res.json());
  }
}