diff --git a/README.md b/README.md index c8306e8..e455fa6 100644 --- a/README.md +++ b/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. \ No newline at end of file diff --git a/src/app/component/home/home.component.html b/src/app/component/home/home.component.html index e5fd49b..f5ae9c5 100644 --- a/src/app/component/home/home.component.html +++ b/src/app/component/home/home.component.html @@ -1,4 +1,4 @@ -
Loading tasks...
} -Temps écoulé : {{ count / 2 }} secondes
\ No newline at end of file +Elapsed time: {{ elapsedClock }}
+ + + \ No newline at end of file diff --git a/src/app/component/home/home.component.ts b/src/app/component/home/home.component.ts index 11e7843..84c2a96 100644 --- a/src/app/component/home/home.component.ts +++ b/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