Adding tasks

Our task list looks nice already, but it would be quite useless if the user is unable to add new tasks to the list. Let's create a component for entering new tasks together. Let's create a new component with the responsibilities of handling all the UI logic necessary for entering a new task to our list.

Let's use the Angular CLI tool to create a new component stub:

ng generate component --spec false -ve none tasks/enter-task

Open up the template of the newly created component located at src/app/tasks/enter-task/enter-task.component.html and apply the following changes:

<input type="text"
       placeholder="Enter new task title..." 
       #titleInput> 
<button (click)="enterTask(titleInput)"> 
  Add Task 
</button>

This template consists of an input field as well as a button to enter a new task. If you...