Let's infuse some life into it then! One of the good things about implementing two-way data binding support in our form elements is that we do not need to import anything upfront. Angular 2 is smart enough to detect what it needs and the only directive we will need is already supplied out-of-the-box. We are obviously referring to the NgModel directive. According to the Angular 2 official documentation:

In a nutshell, in the very moment we bind an ngModel attribute to a form control, the control will watch the value stored at the component class property it is bound to and will update itself as soon as the value changes in the model. You might think: this is already done by Angular without any real fanfare. Yes, but the main difference here is that such surveillance is performed in both ways. This means that the class model will update its state as soon as the form control value is updated.

Enough said! It's time for some action. Let's update our task editing component to try this out. Bring up the code of our task editing component and, first of all, please note that it features a CanActivate decorator that posed a passthrough question to the user. Let's remove it, since we will encounter more secure and elegant ways to provide such functionality later in this chapter. Now, let's add a new member named taskName, which will obviously represent a task name!

app/tasks/task-editor.component.ts

export default class TaskEditorComponent implements OnActivate, CanDeactivate, OnDeactivate {
    taskName: string;

    constructor(private title: Title) {}

    // Rest of the component remains unchanged
}

Open the associated template and update the first input block to look like this. We will explain all this in a minute:

app/tasks/task-editor.component.html

<p>Your task name is {{taskName}}</p>
<div class="form-group">
  <input type="text"
    class="form-control"
    placeholder="Task name"
    [(ngModel)]="taskName">
</div>

As you can see, we have attached a [(ngModel)] attribute directive into our input control pointing to the string property we just created in the component class, which is also shown on the screen right above the input. Execute the code and change the text field values. You will see how the text entered is updated in real-time on screen.

The syntax of the ngModel gives a very good hint to what is it all about. We are blending in a single attribute an event handler and a property binding (hence the combination of brackets plus braces), so we can inject a value into the target control while listening to changes made on the value at the same time. In other words, it is two-way data binding.

Obviously, this is a very simplistic example and we aim to build something more ambitious, so let's leverage this recently gained experience to build something more useful. In the following section, we are going to:

Remove the code just added and import the Task interface type into our form along with the TaskService manager, by appending the following import statement to the top:

app/tasks/task-editor.component.ts

import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
import {
  Router,
  ROUTER_DIRECTIVES,
  ComponentInstruction,
  CanActivate,
  OnActivate,
  CanDeactivate,
  OnDeactivate } from '@angular/router-deprecated';
import { 
  Task,
  TaskService } from '../shared/shared';

You might have noticed that we also imported the Router type from angular2/router. We will need it to redirect the user back to the Pomodoro list page once the new task has been successfully created.

Now, we need to append a new Task-annotated member to our class and declare TaskService as a dependency in the constructor, so we can persist the newly created task later. Remove the taskName string field we created earlier and update the class with these changes:

app/tasks/task-editor.component.ts

export default class TaskEditorComponent implements OnActivate, CanDeactivate, OnDeactivate {
  task: Task;

  constructor(
    private title: Title,
    private router: Router,
  private taskService: TaskService) {
    this.task = <Task>{};
  }

  // Rest of the component remains unchanged
}

We have added a new field to the class representing the Task model our form will be bound to. Since Task is an interface type, we cannot instantiate it by using the new keyword, since interfaces have no constructor. However, we can take advantage of generics and typecast an empty object to enforce the Task interface, as we did in the preceding code.

On the other hand, the types declared in the constructor ensure that the Angular injector will make them available as class fields for the rest of the component members once it is instantiated.

Ideally, we would just need to link the form data to the object represented by the task member of our component class, persist it throughout the application by using the methods already created in the TaskService class, and then proceed to the task list right after that. Let's begin by updating our HTML template with the required ngModel attributes, including a Submit button and a submit handler in the form wrapper tag:

app/tasks/task-editor.component.html

<form class="container" (submit)="saveTask()">
  <h3>Task Editor:</h3>
  <div class="form-group">
    <input type="text" 
      class="form-control"
      placeholder="Task name" 
      [(ngModel)]="task.name">
  </div>

  <div class="form-group">
    <input type="date" 
      class="form-control"
      [(ngModel)]="task.deadline">
  </div>

  <div class="form-group">
    <input type="number" 
      class="form-control"
      placeholder="Pomodoros required"
      min="1"
      max="4"
      [(ngModel)]="task.pomodorosRequired">
  </div>

  <div class="form-group">
    <input type="checkbox" 
      name="queued"
      [(ngModel)]="task.queued">
    <label for="queued"> this task by default?</label>
  </div>

  <p>
    <input type="submit" class="btn btn-success" value="Save">
    <a [routerLink]="['TaskList']" class="btn btn-danger">
      Cancel
    </a>
  </p>
</form>

There are two remarkable elements in this piece of code:

Our three input fields now benefit from two-way data binding functionality, being each input control pointing to a property exposed by the model object. When submitted, the form will execute the saveTask() method located in the body of our component. Let's take a look into this method then. It has not been added already to the class though so please extend our component with a method featuring such a name and append it anywhere in the class right after its constructor:

app/tasks/task-editor.component.ts

saveTask() {
  this.task.deadline = new Date(this.task.deadline.toString());
  this.taskService.addTask(this.task);
  this.router.navigate(['TaskList']);
}

export default class TaskEditorComponent implements OnActivate, CanDeactivate, OnDeactivate {
  task: Task;
  changesSaved: boolean;

  constructor(
    private title: Title,
    private router: Router,
    private taskService: TaskService) {
      this.task = <Task>{};
  }

  saveTask() {
    this.task.deadline = new Date(this.task.deadline.toString());
    this.taskService.addTask(this.task);
    this.changesSaved = true;
    this.router.navigate(['TaskList']);
  }

  routerOnActivate() {
    this.title.setTitle('Welcome to the Task Form!');
  }

  routerCanDeactivate() {
    return this.changesSaved || confirm('Are you sure you want to leave?');
  }

  routerOnDeactivate() {
    this.title.setTitle('My Angular 2 Pomodoro Timer');
  }
}