🐯 Mi solución

src/app/app-routing.module.ts

@@ -8,6 +8,9 @@ const routes: Routes = [
     path: '',
     component: HomeComponent,
     pathMatch: 'full'
+  },{
+    path: ':filter',
+    component: HomeComponent,
   }
 ];
 

src/app/app.module.ts

@@ -2,17 +2,32 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
+
+import { ReactiveFormsModule } from '@angular/forms';
+
+//Components
 import { AppComponent } from './app.component';
+import { HeaderComponent } from './components/header/header.component';
+import { FooterComponent } from './components/footer/footer.component';
+import { TaskListComponent } from './components/task-list/task-list.component';
+import { TaskItemComponent } from './components/task-item/task-item.component';
+
+//pages
 import { HomeComponent } from './pages/home/home.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HomeComponent
+    HomeComponent,
+    HeaderComponent,
+    FooterComponent,
+    TaskListComponent,
+    TaskItemComponent,
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/footer/footer.component.html

@@ -0,0 +1,37 @@
+<!-- This footer should be 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>{{ taskLength }}</strong>
+      {{ taskLength === 1 ? "item" : "items" }} left</span
+    >
+    <!-- Remove this if you don't implement routing -->
+    <ul class="filters">
+      <li>
+        <a
+          routerLink="/"
+          [routerLinkActiveOptions]="{ exact: true }"
+          routerLinkActive="selected"
+          >All</a
+        >
+      </li>
+      <li>
+        <a
+          routerLink="/pending"
+          routerLinkActive="selected"
+          >Pending</a
+        >
+      </li>
+      <li>
+        <a
+          routerLink="/completed"
+          routerLinkActive="selected"
+          >Completed</a
+        >
+      </li>
+    </ul>
+    <!-- Hidden if no completed items are left ↓ -->
+    <button *ngIf="taskLengthCompleted" (click)="clearCompleted()" class="clear-completed">
+      Clear completed
+    </button>
+  </footer>

src/app/components/footer/footer.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { TaskService } from '@app/services/task.service'
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html'
+})
+export class FooterComponent implements OnInit {
+  constructor (private taskService: TaskService) { }
+  taskList$ = this.taskService.taskList$;
+  taskLength: number = 0
+  taskLengthCompleted: number = 0
+  ngOnInit() {
+    this.taskList$.subscribe(taskList => {
+      this.taskLength = taskList.filter(item => item.completed ===false).length
+      this.taskLengthCompleted = taskList.filter(item => item.completed ===true).length
+    })
+  }
+
+  clearCompleted(){
+    this.taskService.clearCompleted()
+  }
+
+}

src/app/components/header/header.component.html

@@ -0,0 +1,15 @@
+<header class="header">
+  <div class="container">
+    <h1>My Day</h1>
+    <p>All my tasks in one place</p>
+    <input
+      class="new-todo"
+      placeholder="Type new todo"
+      autofocus
+      [formControl]="taskControl"
+      type="text"
+      #taskInput
+      (keydown.enter)="createTask()"
+    />
+  </div>
+</header>

src/app/components/header/header.component.ts

@@ -0,0 +1,29 @@
+import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+
+import { TaskService } from '@app/services/task.service';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+})
+export class HeaderComponent implements OnInit {
+  constructor(private taskService: TaskService) {}
+  @ViewChild('taskInput') taskInput!: ElementRef;
+
+  taskControl = new FormControl('', Validators.required);
+  taskList$ = this.taskService.taskList$;
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.taskInput.nativeElement.focus();
+    }, 0);
+  }
+
+  createTask() {
+    if (this.taskControl.valid && this.taskControl.value) {
+      this.taskService.create(this.taskControl.value.trim());
+      this.taskControl.setValue('');
+    }
+  }
+}

src/app/components/task-item/task-item.component.html

@@ -0,0 +1,22 @@
+<li [ngClass]="{ completed: task.completed, editing: editing }">
+  <div class="view">
+    <input
+      class="toggle"
+      type="checkbox"
+      (click)="checked()"
+      [checked]="task.completed"
+    />
+    <label (dblclick)="activeEdit()">{{ task.title }}</label>
+    <button class="destroy" (click)="deleteTask()"></button>
+  </div>
+  <input
+    *ngIf="editing"
+    class="edit"
+    (keydown.escape)="closeEdit()"
+    (keydown.enter)="updateTask()"
+    [ngModel]="task.title"
+    [value]="task.title"
+    [formControl]="taskControl"
+    #taskInput
+  />
+</li>

src/app/components/task-item/task-item.component.ts

@@ -0,0 +1,54 @@
+import { Component, Input, ViewChild, ElementRef } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+
+import { ITask } from '@app/models/Task.model';
+import { TaskService } from '@app/services/task.service';
+
+@Component({
+  selector: 'app-task-item',
+  templateUrl: './task-item.component.html',
+})
+export class TaskItemComponent {
+  constructor(private taskService: TaskService) {}
+
+  @Input() task!: ITask;
+  @ViewChild('taskInput') taskInput!: ElementRef;
+
+  taskControl = new FormControl('', Validators.required);
+  editing = false;
+
+  activeEdit() {
+    this.editing = true;
+    setTimeout(() => {
+      this.taskInput.nativeElement.focus();
+      const title = this.taskControl.value;
+      if (title) {
+        this.taskInput.nativeElement.setSelectionRange(
+          title.length,
+          title.length
+        );
+      }
+    }, 0);
+  }
+
+  checked() {
+    this.task.completed = !this.task.completed;
+    this.taskService.update(this.task.id, this.task);
+  }
+
+  closeEdit() {
+    this.editing = false;
+  }
+
+  updateTask() {
+    if (this.taskControl.valid && this.taskControl.value) {
+      this.task.title = this.taskControl.value.trim();
+      this.taskService.update(this.task.id, this.task);
+      this.closeEdit();
+    }
+  }
+
+  deleteTask() {
+    this.taskService.delete(this.task.id);
+  }
+}

src/app/components/task-list/task-list.component.html

@@ -0,0 +1,6 @@
+<!-- This section should be hidden by default and shown when there are tasks -->
+<section class="main">
+  <ul class="todo-list">
+    <app-task-item *ngFor="let task of taskList" [task]="task" />
+  </ul>
+</section>

src/app/components/task-list/task-list.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+
+import { TaskService } from '@app/services/task.service'
+import { ITask } from '@app/models/Task.model';
+
+@Component({
+  selector: 'app-task-list',
+  templateUrl: './task-list.component.html'
+})
+export class TaskListComponent {
+  taskEditing = {
+    id: 0,
+    editing: false
+  };
+  constructor (private taskService: TaskService) { }
+
+  taskList$ = this.taskService.taskList$;
+  taskList: ITask[] = []
+
+  @Input()
+  set TaskList(value: ITask[]) {
+    this.taskList = value;
+  }
+}

src/app/models/Task.model.ts

@@ -0,0 +1,5 @@
+export interface ITask {
+    id: number,
+    title: string
+    completed: boolean
+}