In order to make our task details route navigable, we need to modify our task component within the task list. We would like to add a small button to our task component that will navigate to the details view. Let's start with the template changes; open our task component template, 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="content"> <div class="title"> <mac-editor [content]="task.title" [showControls]="true" (outSaveEdit)="updateTitle($event)"></mac-editor> </div> <button class="button button-small" (click)="showDetails()">Details</button> <button class="delete" (click)="deleteTask()"></button> ...
