How do you unsubscribe from an observable in Angular

Unsubscribing from observables is important to prevent memory leaks and unnecessary computations, especially in Angular applications where observables are widely used for asynchronous operations. Here are several methods to unsubscribe from observables in Angular:

Method 1: Using takeUntil with Subject

1. Create a Subject: Declare a Subject or BehaviorSubject in your component.

import { Component, OnDestroy } from '@angular/core';

import { Subject } from 'rxjs';

import { takeUntil } from 'rxjs/operators';

@Component({

  selector: 'app-my-component',

  templateUrl: './my-component.component.html',

  styleUrls: ['./my-component.component.css']

})

export class MyComponent implements OnDestroy {

  private ngUnsubscribe = new Subject<void>();

  ngOnDestroy() {

    this.ngUnsubscribe.next();

    this.ngUnsubscribe.complete();

  }

  loadData() {

    someObservable.pipe(

      takeUntil(this.ngUnsubscribe)

    ).subscribe(data => {

      // Handle data

    });

  }

}

Explanation: takeUntil operator unsubscribes from the observable as soon as the ngUnsubscribe Subject emits a value (in this case, on component destruction in ngOnDestroy).

Method 2: Using Subscription and unsubscribe()

2. Store Subscription: Store the subscription in a variable and unsubscribe manually in ngOnDestroy.

import { Component, OnDestroy } from '@angular/core';

import { Subscription } from 'rxjs';

@Component({

  selector: 'app-my-component',

  templateUrl: './my-component.component.html',

  styleUrls: ['./my-component.component.css']

})

export class MyComponent implements OnDestroy {

  private dataSubscription: Subscription;

  ngOnDestroy() {

    if (this.dataSubscription) {

      this.dataSubscription.unsubscribe();

    }

  }

  loadData() {

    this.dataSubscription = someObservable.subscribe(data => {

      // Handle data

    });

  }

}

Explanation: Store the subscription returned by subscribe() in a class property (dataSubscription). Call unsubscribe() on this property in ngOnDestroy to release resources.

Method 3: Using async Pipe

3. Using async Pipe: When subscribing to observables in templates using the async pipe, Angular automatically unsubscribes when the component is destroyed.

import { Component } from '@angular/core';

import { Observable } from 'rxjs';

@Component({

  selector: 'app-my-component',

  templateUrl: './my-component.component.html',

  styleUrls: ['./my-component.component.css']

})

export class MyComponent {

  data$: Observable<any>;

  constructor(private dataService: DataService) {

    this.data$ = this.dataService.getData();

  }

}

<div *ngIf="data$ | async as data">

  {{ data | json }}

</div>

Explanation: When using the async pipe in the template, Angular manages the subscription and unsubscribes automatically when the component is destroyed.

Best Practices:

• Always Unsubscribe: It’s important to unsubscribe from observables to avoid memory leaks, especially for long-lived observables (like those used in HTTP requests).
• Use takeUntil: Using takeUntil with a Subject ensures that all subscriptions are cleaned up when the component is destroyed.
• Manual Unsubscription: For subscriptions stored in variables (Subscription), ensure to call unsubscribe() in ngOnDestroy to release resources.

By following these practices, you ensure that your Angular application manages resources efficiently and avoids potential memory leaks caused by lingering subscriptions.