# Angular anti-pattern: les Observables et le désabonnement

Les observables peuvent causer des **fuites de mémoire** si l'on ne prend pas la précaution de se désabonner.

```typescript
// Don't do that
this.postService.getPosts().subscribe(
    posts => this.posts = posts;
)
```

Avant la sortie d'Angular 16, diverses techniques de désabonnement automatique étaient utilisées. Par exemple :

* Utiliser l'objet [`Subscription`](https://rxjs.dev/api/index/class/Subscription) et l'interface [`OnDestroy`](https://angular.io/api/core/OnDestroy)
    
* Utiliser [l'implémentation SubSink de Ward Bell](https://github.com/wardbell/subsink) avec l'interface [`OnDestroy`](https://angular.io/api/core/OnDestroy)
    
* Utiliser le pipe [`async`](https://angular.io/api/common/AsyncPipe)
    
* Ou encore passer par une classe `adapter` qui implémente une fois pour toute la logique de désabonnement dans notre application - [example ici](https://stackblitz.com/edit/stackblitz-starters-gq9zd5?file=src%2Fapp%2Funsubscribe-on-destroy-adapter.ts)
    

La plus simple de toutes ces techniques est le pipe [`async`](https://angular.io/api/common/AsyncPipe), car il prend en charge la souscription, la récupération des données et le désabonnement à notre place.

Avec l'arrivée d'Angular 16, les choses ont beaucoup évolué grâce au nouvel opérateur [`takeUntilDestroyed`](https://angular.io/api/core/rxjs-interop/takeUntilDestroyed). Cet opérateur termine l'observable lorsque le contexte appelant (composant, directive, service, pipe, etc.) est détruit.

```typescript
// Official Angular operator for automatic unsubscriptions
this.postService.getPosts().pipe(
    takeUntilDestroyed()
).subscribe(
    posts => this.posts = posts;
)
```

Mais une technique spéciale consiste à utiliser `takeUntilDestroyed` directement dans le service qui expose l'observable, de la manière suivante :

```typescript
getPosts(): Observable<Post> {
    // This is done once for all
    // Nothing else to do in your components
    return this.http.get<Post>(...).pipe(
        takeUntilDestroyed()
    );
}
```

Ainsi, tous vos composants sont couverts, que vous utilisiez `async` ou non.