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 ...
