(feat): refactor code

todo-workspace/frontend/src/app/app.component.html

-<app-todo-list />
+<app-todo-list />
\ No newline at end of file

todo-workspace/frontend/src/app/app.component.ts

 import { Component, inject } from '@angular/core';
-import { TodoListComponent } from '@features/todo-list/todo-list.component';
+import TodoListComponent from '@features/todo-list/todo-list.component';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faIcons } from '@shared/fa-icons';
 

todo-workspace/frontend/src/app/features/todo-list/components/add-todo-form.component.ts

+import { Component, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-add-todo-form',
+  template: `
+    <form (ngSubmit)="this.add.emit(todoInput.value); todoInput.value = ''">
+      <div class="flex space-x-2">
+        <input
+          #todoInput
+          class="input input-bordered w-full"
+          name="add todo"
+          placeholder="Ex : Tourner une vidéo sur Angular"
+          type="text"
+        />
+        <button class="btn btn-neutral" type="submit">Ajouter</button>
+      </div>
+    </form>
+  `,
+  imports: [FormsModule],
+})
+export class AddTodoFormComponent {
+  add = output<string>();
+}

todo-workspace/frontend/src/app/features/todo-list/components/todo-list-item.ts

+import { Component, input, output } from '@angular/core';
+import { Todo } from '@core/models/todo';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { NgClass } from '@angular/common';
+
+@Component({
+  selector: 'app-todo-list-item',
+  template: `
+    <li class="py-2 w-full">
+      <label class="fieldset-label">
+        <input type="checkbox" [checked]="todo().completed" class="checkbox" (change)="toggleCompleted.emit(todo())" />
+        <span [ngClass]="{ 'line-through': todo().completed }">{{ todo().name }}</span>
+        <button class="btn btn-ghost btn-error" (click)="remove.emit(todo())">
+          <fa-icon [icon]="['fas', 'trash']"></fa-icon>
+        </button>
+      </label>
+    </li>
+  `,
+  imports: [FaIconComponent, NgClass],
+})
+export class TodoListItemComponent {
+  todo = input.required<Todo>();
+  toggleCompleted = output<Todo>();
+  remove = output<Todo>();
+}

todo-workspace/frontend/src/app/features/todo-list/todo-list.component.html

@@ -2,36 +2,18 @@
   <div class="w-full max-w-md bg-white p-6 rounded-lg shadow-lg">
     <h1 class="text-center text-3xl font-bold mb-4">Check-list</h1>
     <!-- Input et bouton -->
-    <form (ngSubmit)="addTodo(todoInput.value); todoInput.value = ''">
-      <div class="flex space-x-2">
-        <input
-          #todoInput
-          class="input input-bordered w-full"
-          name="add todo"
-          placeholder="Ex : Tourner une vidéo sur Angular"
-          type="text"
-        />
-        <button class="btn btn-neutral" type="submit">Ajouter</button>
-      </div>
-    </form>
-    <!-- Texte centré -->
+    <app-add-todo-form (add)="addTodo($event)" />
+
+    <!-- Liste des tâches -->
     <div class="flex-grow flex items-center justify-center py-5">
+      <ul class="list text-gray-600 text-lg">
+        @for (todo of todos(); track todo.id) {
+          <app-todo-list-item [todo]="todo" (toggleCompleted)="toggleCompleted($event)" (remove)="remove($event)" />
+        }
+      </ul>
+
       @if (!todos()?.length) {
         <p class="text-gray-600 text-lg">Ajoute ta première tâche 👆</p>
-      } @else {
-        <ul class="list text-gray-600 text-lg">
-          @for (todo of todos(); track todo.id) {
-            <li class="py-2 w-full">
-              <label class="fieldset-label">
-                <input type="checkbox" [checked]="todo.completed" class="checkbox" (change)="toggleCompleted(todo)" />
-                <span [ngClass]="{ 'line-through': todo.completed }">{{ todo.name }}</span>
-                <button class="btn btn-ghost btn-error" (click)="remove(todo)">
-                  <fa-icon [icon]="['fas', 'trash']"></fa-icon>
-                </button>
-              </label>
-            </li>
-          }
-        </ul>
       }
     </div>
   </div>

todo-workspace/frontend/src/app/features/todo-list/todo-list.component.ts

 import { Component, inject } from '@angular/core';
 import { TodoService } from '@core/ports/todo.service';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { NgClass } from '@angular/common';
 import { BehaviorSubject, switchMap, tap } from 'rxjs';
 import { FormsModule } from '@angular/forms';
 import { Todo } from '@core/models/todo';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { AddTodoFormComponent } from '@features/todo-list/components/add-todo-form.component';
+import { TodoListItemComponent } from '@features/todo-list/components/todo-list-item';
 
 @Component({
   selector: 'app-todo-list',
-  imports: [NgClass, FormsModule, FaIconComponent],
+  imports: [FormsModule, AddTodoFormComponent, TodoListItemComponent, TodoListItemComponent],
   templateUrl: './todo-list.component.html',
   styleUrl: './todo-list.component.scss',
 })
-export class TodoListComponent {
+export default class TodoListComponent {
   private reload$$ = new BehaviorSubject<void>(void 0);
   private readonly todoService = inject(TodoService);
   todos = toSignal(

todo-workspace/frontend/src/main.ts

-import {bootstrapApplication} from '@angular/platform-browser';
-import {appConfig} from '@app/app.config';
-import {AppComponent} from '@app/app.component';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from '@app/app.config';
+import { AppComponent } from '@app/app.component';
 
 bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));