READ: Get all tasks

src/app/todo/todo.component.html

@@ -14,21 +14,14 @@ <h1>Todo</h1>
     <ul class="todo-list">
       <!-- These are here just to show the structure of the list items -->
       <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
-      <li class="completed">
+      <li *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone}" >
         <div class="view">
-          <input class="toggle" type="checkbox" checked>
-          <label>Install angular-cli</label>
+          <input class="toggle" type="checkbox" [checked]="todo.isDone">
+          <label>{{todo.title}}</label>
           <button class="destroy"></button>
         </div>
-        <input class="edit" value="Create a TodoMVC template">
-      </li>
-      <li>
-        <div class="view">
-          <input class="toggle" type="checkbox">
-          <label>Understand Angular2 apps</label>
-          <button class="destroy"></button>
-        </div>
-        <input class="edit" value="Rule the web">
+        <input class="edit"
+               value="{{todo.title}}">
       </li>
     </ul>
   </section>

src/app/todo/todo.component.ts

@@ -1,15 +1,25 @@
 import { Component, OnInit } from '@angular/core';
 
+import { TodoService } from './todo.service';
+
 @Component({
   selector: 'app-todo',
   templateUrl: './todo.component.html',
-  styleUrls: ['./todo.component.scss']
+  styleUrls: ['./todo.component.scss'],
+  providers: [TodoService]
 })
 export class TodoComponent implements OnInit {
+  private todos;
 
-  constructor() { }
+  constructor(private todoService: TodoService) { }
 
-  ngOnInit() {
+  getTodos(){
+    return this.todoService.get().then(todos => {
+      this.todos = todos;
+    });
   }
 
+  ngOnInit() {
+    this.getTodos();
+  }
 }

src/app/todo/todo.service.ts

@@ -1,8 +1,19 @@
 import { Injectable } from '@angular/core';
 
+let todos = [
+  { title: 'Install Angular CLI', isDone: true },
+  { title: 'Style app', isDone: true },
+  { title: 'Finish service functionality', isDone: false },
+  { title: 'Setup API', isDone: false },
+];
+
 @Injectable()
 export class TodoService {
 
   constructor() { }
 
+  get(){
+    return new Promise(resolve => resolve(todos));
+  }
+
 }