UPDATE: on double click

src/app/todo/todo.component.html

@@ -18,14 +18,18 @@ <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 *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone}" >
+      <li *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone, editing: todo.editing}" >
         <div class="view">
           <input class="toggle" type="checkbox" [checked]="todo.isDone">
-          <label>{{todo.title}}</label>
+          <label (dblclick)="todo.editing = true">{{todo.title}}</label>
           <button class="destroy"></button>
         </div>
         <input class="edit"
-               value="{{todo.title}}">
+               #updatedTodo
+               [value]="todo.title"
+               (blur)="updateTodo(todo, updatedTodo.value)"
+               (keyup.escape)="todo.editing = false"
+               (keyup.enter)="updateTodo(todo, updatedTodo.value)">
       </li>
     </ul>
   </section>

src/app/todo/todo.component.ts

@@ -32,5 +32,13 @@ export class TodoComponent implements OnInit {
     }).then(() => {
       this.newTodo = ''; // clear input form value
     });
-  }  
+  }
+
+  updateTodo(todo, newValue) {
+    todo.title = newValue;
+    return this.todoService.put(todo).then(() => {
+      todo.editing = false;
+      return this.getTodos();
+    });    
+  }
 }

src/app/todo/todo.service.ts

@@ -1,10 +1,10 @@
 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 },
+  { _id: 1, title: 'Install Angular CLI', isDone: true },
+  { _id: 2, title: 'Style app', isDone: true },
+  { _id: 3, title: 'Finish service functionality', isDone: false },
+  { _id: 4, title: 'Setup API', isDone: false },
 ];
 
 @Injectable()
@@ -23,4 +23,12 @@ export class TodoService {
     });
   }
 
+  put(data) {
+    return new Promise(resolve => {
+      let index = todos.findIndex(todo => todo._id === data._id);
+      todos[index].title = data.title;
+      resolve(data);
+    });
+  }  
+
 }