Angular

// TODO.SERVICE.TS

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Todo } from './todo';

@Injectable({
  providedIn: 'root'
})

export class TodoService {
  [x: string]: any;

  private url: string;
  private username: string;
  constructor(private http: HttpClient)
  {
    this.url = 'http://localhost:8080/services/todo';
    this.username = 'TEST USER';
  }

  public findAll() : Observable<Array<Todo>>
    {
      return this.http.get('/services/todo').forEach((response: Response) => response.json())
      .then((data: any) => {
        return data._embedded.todoList as Todo[];
      });
  }

// TODOLIST.COMPONENT.TS
export class TodoListComponent implements OnInit {
  [x: string]: any;

  todos: Todo [];
  errorMessage: string;

  constructor(private todoService: TodoService,  private route: ActivatedRoute, private router: Router
    ) { this.errorMessage = '';}

  ngOnInit()
  {
    this.todoService.findAll().subscribe ( data => { this.todos = data; } , error => this.errorMessage = 'Cannot connect to database!'  );
  }

  deleteTodo(id: number)
  {
    this.todoService.deleteTodo(id).subscribe(data => {});
    this.router.navigate(['/todos']);
  }
}

// TODOLIST.COMPONENT.HTML

<tr *ngFor="let todo of todos" >