Now, it's time to incorporate the editor component we've just created within our current project. We will use the editor component to make three areas in our application editable in-place:
- The titles of tasks within our task list
- The title of projects
- The description of projects
Let's start by integrating our in-place editor component into our task list component and making the titles of our tasks editable. Open up the file located in src/app/tasks/task/task.component.html and apply the following changes:
<mac-checkbox [checked]="task.done" (outCheck)="updateTask($event)"></mac-checkbox><div class="title"> <mac-editor [content]="task.title" [showControls]="true" (outSaveEdit)="updateTitle($event)"></mac-editor> ...