cange

README.md

@@ -57,3 +57,16 @@ Angular CLI does not come with an end-to-end testing framework by default. You c
 ## Additional Resources
 
 For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+
+## Séquence 2 – Logique réactive du flux de données
+### 1. Structure du flux
+- Le service `TaskService` utilise un **BehaviorSubject** pour stocker et diffuser la liste des tâches.
+- Le composant `Home` s’abonne à ce flux via `tasks$` et le **pipe async**.
+### 2. Mise à jour des données
+- La méthode `addTask()` ajoute une tâche puis appelle `next()` pour émettre la nouvelle liste.
+- La méthode `removeTask()` supprime une tâche puis émet à nouveau la liste mise à jour.
+- La vue est automatiquement réactualisée sans rechargement.
+### 3. Points clés retenus
+- Pas besoin d’appeler `getTasks()` à chaque fois : la donnée est **vivante**.
+- `| async` gère l’abonnement et le désabonnement automatiquement.
+- Le flux reste cohérent entre le service et la vue.

src/app/component/home/home.component.html

@@ -1,4 +1,4 @@
-<h1>home works!</h1>
+<h1>Home works!</h1>
 
 <h2>Task List</h2>
 @if (tasks$ | async; as tasks) {
@@ -13,4 +13,7 @@
   <p>Loading tasks...</p>
 }
 
-<p>Temps écoulé : {{ count / 2 }} secondes</p>
+<p>Elapsed time: <span style="font-family:monospace;font-size:1.2em">{{ elapsedClock }}</span></p>
+
+<!-- Add a task -->
+<button (click)="addTask('New Task')">+ Add a task</button>

src/app/component/home/home.component.ts

@@ -1,5 +1,5 @@
 
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import { TaskService } from '../../service/task.service';
 
@@ -12,16 +12,16 @@ import { TaskService } from '../../service/task.service';
 export class HomeComponent {
   protected count = 0;
   private intervalId: any;
+  public elapsedClock: string = '';
 
-  tasks$!: ReturnType<TaskService['getTasks']>;
+  private taskService = inject(TaskService);
-
+  tasks$ = this.taskService.tasks$;
-  constructor(private taskService: TaskService) {
-    this.tasks$ = this.taskService.getTasks();
-  }
 
   ngOnInit() {
+    this.updateElapsedClock();
     this.intervalId = setInterval(() => {
       this.count++;
+      this.updateElapsedClock();
     }, 500);
   }
 
@@ -31,4 +31,15 @@ export class HomeComponent {
     }
   }
 
+  private updateElapsedClock() {
+    const totalSeconds = Math.floor(this.count / 2);
+    const h = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
+    const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
+    const s = String(totalSeconds % 60).padStart(2, '0');
+    this.elapsedClock = `${h}:${m}:${s}`;
+  }
+
+  addTask(title: string) {
+    this.taskService.addTask(title);
+  }
 }

src/app/service/task.service.ts

@@ -1,14 +1,28 @@
 import { Injectable } from '@angular/core';
-import { of } from 'rxjs';
+import { BehaviorSubject, of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
 })
 export class TaskService {
-  private tasks = [{id: 1 , title: 'Sample Task'}, {id: 2, title: 'Another Task'}, {id: 3, title: 'More Tasks'}];
+  private tasks = [
+    { id: 1, title: 'Sample Task' },
+    { id: 2, title: 'Another Task' },
+    { id: 3, title: 'More Tasks' }
+  ];
+  private nextId = this.tasks.length > 0 ? Math.max(...this.tasks.map(t => t.id)) + 1 : 1;
 
   getTasks() {
     return of(this.tasks).pipe(delay(1000));
   }
+
+  private tasksSubject = new BehaviorSubject(this.tasks);
+  tasks$ = this.tasksSubject.asObservable();
+
+  addTask(title: string) {
+    const newTask = { id: this.nextId++, title: title.trim() };
+    this.tasks.push(newTask);
+    this.tasksSubject.next([...this.tasks]);
+  }
 }