Angular loss of var/const

I'm making a simple rest todo-crud app in angular (5 to be exact).

I'm having an issue (or rather issues) with scope (or I think that's what it is) :

home.component.ts :

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() { }
    );
  }
}

home.service.ts :

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());
  }
}

I can't figure out how I'm supposed to have usable vars/lets/const

what am I doing wrong? why, in my first function (which is called as soon as the app loads), do I have a hydrated var whereas in my second function (which is necessarily called after because I have to click a button for it to be called), is my var unhydrated??? :

and also why am I being pushed to do this local var + wait/debounce gimmick to get response out of the response function?

there's gotta be a better way.

Solution

You do not need to use setTimeout in order to wait for responses from server, as a matter of fact, in your subscribe you already have the values retrieved, so just:

ngOnInit() {
this.homeService.getToDo().subscribe(
  response => this.todos = response // sufficient
  error =>  console.log('Error happened', error) // use lamdas to preserve `this`
  }