How to change title value of todo list-a in express+angular 2 (typescript)?

Question

Angular

Hello. I just started learning how to develop web applications using express (node ​​js) and angular 2. There was a question of changing the entered data in the todo list (task list) application, for example, if you double-click on the title of the line, or add an edit button next to each.
The application itself (among the ready-made events so far there are only adding, deleting a line and changing the state of the checkbox)

Task

export class Task{
    title: string;
    isDone: boolean;
}

html tasks.component.html file

<form class="form-group"(submit)="addTask($event)">
        <input type="text" [(ngModel)]="title" name="title" class="form-control" placeholder="Add Task...">    
      <!--</div>  -->

</form>

    <!--<div class="task-list">-->
        <div *ngFor="let task of tasks" class="todo">
                  <button  class="delete icon">
                <i  class="material-icons">delete</i>
            </button>
            </div>-->
            <button class="checkbox icon" (click)="updateStatus(task)">
            <i class="material-icons">{{task.isDone ? 'check_box' : 'check_box_outline_blank' }}</i>
            </button>

            <span class = "title"> {{task.title}}</span>

            <div class="actions" (click)="deleteTask(task._id)">
                <button class="delete icon">
                    <i class="material-icons">delete</i>
                </button>
            </div>
            </div>

tasks.component.ts file

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 => {
                this.tasks = tasks;
            });
    }
    
    addTask(event){
        event.preventDefault();
        var newTask = {
            title: this.title,
            isDone: false
        }
        
        this.taskService.addTask(newTask)
            .subscribe(task => {
                this.tasks.push(task);
                this.title = '';
            });
    }
    
    deleteTask(id){
        var tasks = this.tasks;
        
        this.taskService.deleteTask(id).subscribe(data => {
            if(data.n == 1){
                for(var i = 0;i < 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 => {
            task.isDone = !task.isDone;
        });
    }
}

Processing service file task.service.ts

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 => 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 => res.json());
    }
    
    deleteTask(id){
        return this.http.delete('/api/task/'+id)
            .map(res => 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 => res.json());
    }
}

Answer 1

Well, on the client you have everything ready. UpdateStatus sends the changed title. so it's enough to process the change on the server. Well, change to for any event
<input [(ngModel)]="task.title">