angular unsubscribe from observable code example

Example 1: angular unsubscribe from observable

//Please note that there are many ways to unsubscribe, this is one of them
import { Subscription } from 'rxjs';

private searchEventSubscription: Subscription;

export class someComponent OnInit, OnDestroy {

    constructor(private someService: SomeService) { }

    ngOnInit() {
      this.searchEventSubscription = this.someService.someMethod.subscribe(result => {  
        doSomething(result);
      });
    }

    ngOnDestroy() {
		this.searchEventSubscription.unsubscribe()
    }

Example 2: angular unsubscribe example

/* Best practice is to create a base class and move generik handling to it */

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


export abstract class ComponentBase implements OnDestroy {

  set subs(subscription: Subscription) {
    this.subscriptioions.add(subscription);
  }

  private subscriptioions = new Subscription();

  constructor() {};

  subscribe(service: Observable<any>, successFn: (value: any) => void, errorHandler?: (value: any) => void) {
    this.subs = service.subscribe(successFn, errorHandler || this.errorHandler);
  }

  ngOnDestroy() {
    this.subscriptioions.unsubscribe();
  }

  private errorHandler(error) {
    // TODO: generic error handling
  }
}

/* implementation in a component */
// No need to explicitly subscribe or unsubscribe on destroy

const product$ = this.productService.getProducts(productId);
this.subscribe(product$, (product) => {
	// TODO: use product
})

Example 3: how to unsubscribe from observable created by http

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

interface User {
  id: string;
  name: string;
  age: number;
}

@Component({
  selector: 'app-foobar',
  templateUrl: './foobar.component.html',
  styleUrls: ['./foobar.component.scss'],
})
export class FoobarComponent implements OnInit, OnDestroy {
  private user: User = null;
  private destroy$ = new Subject();

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .get<User>('api/user/id')
      .pipe(takeUntil(this.destroy$))
      .subscribe(user => {
        this.user = user;
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();  // trigger the unsubscribe
    this.destroy$.complete(); // finalize & clean up the subject stream
  }
}