<a [routerLink]="">Home</a>
<a [routerLink]="">Home</a>
<a [routerLink]="">Home</a>

<p>{{ 'Sample text processed by a pipe' | sample }}</p>

<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <input (keydown.enter)="addTodo(input)" #input class="new-todo" placeholder="What needs to be done?" autofocus />
  </header>
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all">Mark all as complete</label>
    <!--  {{slowBinding}}-->
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->

      <app-todo
        appTooltip
        *ngFor="let todo of todos | todosFilter: filterValue"
        [todo]="todo"
        (delete)="onDelete($event)"
        (update)="onChange($event)"
      ></app-todo>
    </ul>
  </section>
  <!-- This footer should hidden by default and shown when there are todos -->
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"
      ><strong>{{ itemsLeft }}</strong> item left</span
    >
    <!-- Remove this if you don't implement routing -->
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" (click)="clearCompleted()">Clear completed</button>
  </footer>
</section>
