Integrating the editor component

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

Get Mastering Angular Components now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.