myasync

formationApp/src/14-observables/my-async.pipe.ts

@@ -1,11 +1,12 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { Observable } from 'rxjs';
+import {OnDestroy, Pipe, PipeTransform} from '@angular/core';
+import {Observable, Subscription} from 'rxjs';
 
 @Pipe({
   name: 'myAsync',
-  standalone: true
+  standalone: true,
+  pure: false
 })
-export class MyAsyncPipe<T> implements PipeTransform {
+export class MyAsyncPipe<T> implements PipeTransform, OnDestroy {
 
   /* Quelques remarques sur le pipe async :
     - Notre pipe async est générique, du même type que les valeurs émises par l'observable
@@ -15,10 +16,30 @@ export class MyAsyncPipe<T> implements PipeTransform {
     - Le pipe ne prends pas en compte la complétion où les erreurs de l'observable
   */
 
-  transform(obs: null | undefined): null
-  transform(obs: Observable<T>): T | null
-  transform(obs: Observable<T> | null | undefined): T | null {
-    return null;
+  private subscription: Subscription | null = null;
+  private lastValue: T | null = null; // Tant que l'observable n'a pas émit, le pipe renvoie null
+  private currentObservable: Observable<T> | null = null;
+
+  transform(obs: null | undefined): null;
+  transform(obs: Observable<T>): T | undefined;
+  transform(obs: Observable<T> | null | undefined): T | null | undefined {
+    if (obs === null || obs === undefined) {
+      return null; // Le pipe accepte les valeurs nulles ou undefined en entrée, dans ce cas il renvoie null
+    }
+
+    if (obs !== this.currentObservable) {
+      this.currentObservable = obs; // me permet de savoir si l'observable a changé
+
+      this.subscription = this.currentObservable.subscribe({
+        next: value => {
+          this.lastValue = value; // Lorsque l'observable à émit, le pipe renvoie la dernière valeur émise
+        }
+      });
+    }
+
+    return this.lastValue;
   }
 
+  ngOnDestroy() {
+    this.subscription?.unsubscribe();  }
 }

formationApp/src/14-observables/observable.service.ts

@@ -10,7 +10,9 @@ export class ObservableService {
 
   readonly observable = new Observable<number>((subscriber) => {
     console.log("Debut de l'execution de l'observable")
-    subscriber.next(0);
+    setTimeout(() => {
+      subscriber.next(1);
+    }, 2000);
     var interval = setInterval(() => {
       console.log("setInterval de l'observable")
       subscriber.next(5);

formationApp/src/main.ts

@@ -1,10 +1,11 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './demo/app.module';
+import { AppModule } from './demo/app/app.module';
 import { FolderComponent } from './07-component-communication/exercice/folder.component';
+import {MyAsyncComponent} from "./14-observables/my-async.component";
 
 //platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));
 
 // ou
 
-bootstrapApplication(FolderComponent).catch(err => console.error(err));
+bootstrapApplication(MyAsyncComponent).catch(err => console.error(err));