how do i unsubscribe from function in constructor in angular 9

Question

I want to know how to unsubscribe from this subscription?

inventory.component.ts

constructor(
    private terminalService: TerminalService,
    private router: Router,
    private inventoryFilterService: InventoryFilterService
) {
    this.inventoryFilterService.listen().subscribe(() => {
        this.checkState();
    });
}

my problem is, that when i leave the component where i needed this service and re-enter it (the component), every mouse-click into my header-component (where the filter-button is) gets fired twice. I think this happens because i didn't unsubscribe from the service subscription but i also can't figure out how to do this.

inventory-filter.service.ts

@Injectable({
    providedIn: 'root',
})
export class InventoryFilterService {
    constructor() { }

    private _listners = new Subject<any>();

    listen(): Observable<any> {
        return this._listners.asObservable();
    }

    filter() {
        this._listners.next();
    }
}

header-inventory.component.ts

import { Component, OnInit, Output } from '@angular/core';
import { UserRightsService } from 'src/app/services/user/user-rights.service';
import { EventEmitter } from 'events';
import { InventoryFilterService } from 'src/app/services/inventory/inventory-filter.service';

@Component({
    selector: 'app-header-inventory',
    templateUrl: './header-inventory.component.html',
    styleUrls: ['./header-inventory.component.css'],
    providers: [UserRightsService],
})
export class HeaderInventoryComponent implements OnInit {
    @Output() onFilter: EventEmitter = new EventEmitter();

    canAddInventoryItem: Boolean;
    internalOnly: Boolean;

    constructor(
        private userRightsService: UserRightsService,
        private inventoryFilterService: InventoryFilterService,
    ) { }

    ngOnInit() {

    }

    showInternalTerminals(): void {
        this.inventoryFilterService.filter();
        if (localStorage.getItem('onlyInternal') === 'false') {
            this.internalOnly = true;
        } else {
            this.internalOnly = false;
        }
    }
}

inventory.component.ts

import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { TerminalService } from 'src/app/services/terminal/terminal.service';
import { Router } from '@angular/router';
import { InventoryFilterService } from 'src/app/services/inventory/inventory-filter.service';

@Component({
    selector: 'app-inventory',
    templateUrl: './inventory.component.html',
    styleUrls: ['./inventory.component.css'],
})
export class InventoryComponent implements OnInit {

    constructor(
        private terminalService: TerminalService,
        private router: Router,
        private inventoryFilterService: InventoryFilterService
    ) {
        this.inventoryFilterService.listen().subscribe(() => {
            this.checkState();
        });
    }
....

Does this answer your question? [Angular/RxJs When should I unsubscribe from \`Subscription\`](https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription) — Kurt Hamilton, Feb 24 '20 at 14:36

ruth · Accepted Answer · 2020-02-24T14:46:55.733

Assign the subscription to a Subscription variable. It can later be used to unsubscribe.

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

export class AppComponent implements OnInit, OnDestroy {
  private listenSubscription: Subscription;

  constructor (
    private terminalService: TerminalService,
    private router: Router,
    private inventoryFilterService: InventoryFilterService) {

    this.listenSubscription = this.inventoryFilterService.listen().subscribe(() => {
      this.checkState();
    });
  }

  ngOnInit() { }

  ngOnDestroy() {
    if(this.listenSubscription) {
      this.listenSubscription.unsubscribe();
    }
  }
}

this solved it, thank you so much! Will accept in 2 min – Sithys Feb 24 '20 at 14:46 — Sithys, Feb 24 '20 at 14:46

Sam · Answer 2 · 2020-02-24T14:52:24.230

-1

You can assign your subscription to a variable and then use the ngOnDestroy lifecycle hook to clean up when the component is destroyed.

private subscription: Subscription;


constructor(
    private terminalService: TerminalService,
    private router: Router,
    private inventoryFilterService: InventoryFilterService
) {
    this.subscription = this.inventoryFilterService.listen().subscribe(() => {
        this.checkState();
    });
}

onDestroy() {
    this.subscription.unsubscribe();
}

edited Feb 24 '20 at 14:52

answered Feb 24 '20 at 14:36

Sam

1,736
8
15

Conventionally, only observables have the $ notation. Not subscriptions. – bryan60 Feb 24 '20 at 14:38
Good point thanks. I will modify it incase other's stumble over this. – Sam Feb 24 '20 at 14:52

how do i unsubscribe from function in constructor in angular 9

2 Answers2