How do I make sure that I unsubscribed subscribe?

Question

I have a subscription where I get some messages from the store to output toastr.

I unsubscribed by subscribe .unsubscribe().

How can check that I have really unsubscribe?

  subscription!: Subscription;

  ngOnInit(): void { }

  toastrError(): void {
    this.subscription = this.store.select(getMessage).subscribe(m => {
      (m.message && m.title) ? this.toastr.error(m.message, m.title) : null;
    });
  }

  singIn(): void {
    this.toastrError();
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

Answer 1

A component instance has a lifecycle that begins when Angular instantiates the component class and renders the component view (along with its child views). The lifecycle continues with some change detection, as Angular checks to see when data-bound properties change, and in response updates both the view and the component instance when needed. The lifecycle ends when Angular actually destroys the component instance and removes its rendered template from the DOM, so the ngOnDestroy is called immediately before Angular destroys the component (or directive).

If you want to make sure the unsubscription is actually occurring, you can either add a log at the ngOnDestroy method or debug it in the browser.

Answer 2

I'm guessing you could see that you unsubscribed if no more error toasts would show up. But I get your point. You could either log the ngOnDestroy method to be sure it will run and thus, unsubscribe.

Or you could debug it with something like the demo I've come up with here. By showing/hiding the child component, you're able to see the subscription that is logging a 'ping' message, starts and stops accordingly.

Answer 3

1. At first do not write like this use Services.
2. You can use takeUntil like in this example.

import { Component, OnDestroy, OnInit } from '@angular/core';
// RxJs 6.x+ import paths
import { filter, startWith, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { BookService } from '../books.service';

@Component({
  selector: 'app-books',
  templateUrl: './books.component.html'
})
export class BooksComponent implements OnDestroy, OnInit {
  private ngUnsubscribe = new Subject();

  constructor(private booksService: BookService) { }

  ngOnInit() {
    this.booksService.getBooks()
      .pipe(
        startWith([]),
        filter(books => books.length > 0),
        takeUntil(this.ngUnsubscribe)
      )
      .subscribe(books => console.log(books));

    this.booksService.getArchivedBooks()
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(archivedBooks => console.log(archivedBooks));
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}