title: How edit title in todo-list using express and angular 2 (typescript)
body: <p>I make my first app in web using express and Angular 2 - todo list.
  Now i have events to add new task, delete and change checkbox, but i don't know how to edit title by clicking, for example, on item or on the button "<strong>Edit</strong>".</p>
  
  <p><img src="https://i.stack.imgur.com/ppdyt.png" alt="my tasklist"></p>
  
  <p>Task.ts</p>
  
  <pre><code>export class Task{
      title: string;
      isDone: boolean;
  }
  </code></pre>
  
  <p>File html tasks.component.html</p>
  
  <pre><code>&lt;div *ngFor="let task of tasks" class="todo"&gt;
    &lt;button  class="delete icon"&gt;
        &lt;i  class="material-icons"&gt;delete&lt;/i&gt;
    &lt;/button&gt;
  
   &lt;button class="checkbox icon" (click)="updateStatus(task)"&gt;
        &lt;i class="material-icons"&gt;{{task.isDone ? 'check_box' : 'check_box_outline_blank' }}&lt;/i&gt;
   &lt;/button&gt;
  
   &lt;span class = "title"&gt; {{task.title}}&lt;/span&gt;
  
   &lt;div class="actions" (click)="deleteTask(task._id)"&gt;
      &lt;button class="delete icon"&gt;
         &lt;i class="material-icons"&gt;delete&lt;/i&gt;
      &lt;/button&gt;
   &lt;/div&gt;
   &lt;div class="actions" (click)="////////////////////////EDIT/////////////"&gt;
       &lt;button class="editicon"&gt;
          &lt;i class="material-icons"&gt;edit&lt;/i&gt;
        &lt;/button&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>File tasks.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import {TaskService} from '../../services/task.service';
  import {Task} from '../../../Task';
  
  @Component({
    moduleId: module.id,
    selector: 'tasks',
    templateUrl: 'tasks.component.html'
  })
  
  export class TasksComponent { 
      tasks: Task[];
      title: string;
  
      constructor(private taskService:TaskService){
          this.taskService.getTasks()
              .subscribe(tasks =&gt; {
                  this.tasks = tasks;
              });
      }
  
      addTask(event){
          event.preventDefault();
          var newTask = {
              title: this.title,
              isDone: false
          }
  
          this.taskService.addTask(newTask)
              .subscribe(task =&gt; {
                  this.tasks.push(task);
                  this.title = '';
              });
      }
  
      deleteTask(id){
          var tasks = this.tasks;
  
          this.taskService.deleteTask(id).subscribe(data =&gt; {
              if(data.n == 1){
                  for(var i = 0;i &lt; tasks.length;i++){
                      if(tasks[i]._id == id){
                          tasks.splice(i, 1);
                      }
                  }
              }
          });
      }
  
      updateStatus(task){
          var _task = {
              _id:task._id,
              title: task.title,
              isDone: !task.isDone
          };
  
          this.taskService.updateStatus(_task).subscribe(data =&gt; {
              task.isDone = !task.isDone;
          });
      }
  }
  </code></pre>
  
  <p>File task.service.ts</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import {Http, Headers} from '@angular/http';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class TaskService{
      constructor(private http:Http){
          console.log('Task Service Initialized...');
      }
  
      getTasks(){
          return this.http.get('/api/tasks')
              .map(res =&gt; res.json());
      }
  
      addTask(newTask){
          var headers = new Headers();
          headers.append('Content-Type', 'application/json');
          return this.http.post('/api/task', JSON.stringify(newTask), {headers: headers})
              .map(res =&gt; res.json());
      }
  
      deleteTask(id){
          return this.http.delete('/api/task/'+id)
              .map(res =&gt; res.json());
      }
  
      updateStatus(task){
          var headers = new Headers();
          headers.append('Content-Type', 'application/json');
          return this.http.put('/api/task/'+task._id, JSON.stringify(task), {headers: headers})
              .map(res =&gt; res.json());
      }
  }
  </code></pre>