CREATE: new todo elements

src/app/todo/todo.component.html

@@ -2,7 +2,11 @@
 
   <header class="header">
     <h1>Todo</h1>
-    <input class="new-todo" placeholder="What needs to be done?" autofocus>
+    <input class="new-todo"
+           placeholder="What needs to be done?"
+           [(ngModel)]="newTodo"
+           (keyup.enter)="addTodo()"
+           autofocus>
   </header>
 
   <!-- This section should be hidden by default and shown when there are todos -->

src/app/todo/todo.component.ts

@@ -24,5 +24,13 @@ export class TodoComponent implements OnInit {
       this.todos = todos;
       this.activeTasks = this.todos.filter(todo => todo.isDone).length;
     });
-  } 
+  }
+
+  addTodo(){
+    this.todoService.add({ title: this.newTodo, isDone: false }).then(() => {
+      return this.getTodos();
+    }).then(() => {
+      this.newTodo = ''; // clear input form value
+    });
+  }  
 }

src/app/todo/todo.service.ts

@@ -16,4 +16,11 @@ export class TodoService {
     return new Promise(resolve => resolve(todos));
   }
 
+  add(data) {
+    return new Promise(resolve => {
+      todos.push(data);
+      resolve(data);
+    });
+  }
+
 }