3 ways to Unsubscribe Observables in Angular

3 ways to unsubscribe observables in Angular

Observables are a crucial part of Angular, as they allow for efficient communication between components and the handling of asynchronous events. However, it is important to ensure that observables are properly unsubscribed to prevent memory leaks and unexpected behaviour in our applications. In this blog post, we will discuss different ways to unsubscribe observables in Angular.

1. Unsubscribing with takeUntil

One of the most common and recommended ways to unsubscribe from observables is by using the takeUntil operator. This operator takes another observable as a parameter, and it will automatically unsubscribe from the source observable once the second observable emits a value.

Here’s an example:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit, OnDestroy {
  private ngUnsubscribe = new Subject();
  ngOnInit() {
    this.myObservable
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(data => console.log(data));
  }
  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}

In this example, we create a new Subject called ngUnsubscribe. We then use the takeUntil operator to unsubscribe from the myObservable observable when the ngUnsubscribe subject emits a value. Finally, we add a ngOnDestroy method to complete the ngUnsubscribe subject when the component is destroyed.

2. Unsubscribing with async pipe

Another way to automatically unsubscribe from observables is by using the async pipe. The async pipe subscribes to an observable in the template and automatically unsubscribes when the component is destroyed.

Here’s an example:

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  myObservable: Observable<any>;
  constructor() {
    this.myObservable = // Initialize your observable here
  }
}

In this example, we simply assign our observable to a variable called myObservable. Then, in the template, we can use the async pipe to subscribe to the observable:

<!-- html code -->
<p>{{ myObservable | async }}</p>

3. Unsubscribing with Subscription

Lastly, we can manually unsubscribe from observables by using the unsubscribe method in the ngOnDestroy lifecycle hook. This method is called when the component is destroyed, allowing us to clean up any subscriptions that were made.

Here’s an example:

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit, OnDestroy {
  private mySubscription: Subscription;
  ngOnInit() {
    this.mySubscription = this.myObservable.subscribe(data => console.log(data));
  }
  ngOnDestroy() {
    this.mySubscription.unsubscribe();
  }
}

In this example, we create a new Subscription called mySubscription and subscribe to the myObservable observable. We then use the unsubscribe method in the ngOnDestroy method to manually unsubscribe from the subscription.

In conclusion, there are multiple ways to unsubscribe from observables in Angular, each with their own advantages and use cases. It is important to choose the right