O'Reilly logo

Mastering Angular Components by Gion Kunz

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required