unsubscribe does not exist on type Observable<>?

Question

I am trying to unsubscribe from an observable in ngOnDestroy, but it is telling me it does not exist on type Observable.

export class AppComponent implements OnInit {
  public caseData;

  constructor(private _caseService: CaseService,
              private _title: Title,
              private _metaService: Meta) { }

  ngOnInit(): void {
    this._caseService.GetCaseData('en', 'English');
    this._caseService.caseData$.subscribe(res => { this.caseData = res },
      (error) => { console.log(error) });
  }

  ngOnDestroy() {
    this._caseService.caseData$.unsubscribe(); //says it does not exist
  }
}

score 13 · Accepted Answer · answered Jan 18 '18 at 14:16

13

The subscription itself is returned.

  subscription: Subscription;

  ngOnInit(): void {

    this._caseService.GetCaseData('en', 'English');

    this.subscription = this._caseService.caseData$.subscribe(res => { this.caseData = res },
      (error) => { console.log(error) });

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

answered Jan 18 '18 at 14:16

Iancovici

5,574
7
39
57

Thanks. This worked. If I am using async in other components, I don't need to unsubscribe, correct? – xaisoft Jan 18 '18 at 14:56
In general it's better practice to unsubscribe to avoid memory leakage, but that's true for async pipe, it takes care of it for you – Iancovici Jan 18 '18 at 15:42

score 2 · Answer 2 · answered Jan 18 '18 at 14:17

2

unsubscribe() is a method of a Subscription, not an Observable.

answered Jan 18 '18 at 14:17

Roland Rácz

2,879
3
18
44

score 0 · Answer 3 · answered Jan 18 '18 at 14:19

That should work:

export class AppComponent implements OnInit {
  public caseData;
  subscription: any;

  constructor(private _caseService: CaseService, private _title: Title, private _metaService: Meta) { }

  ngOnInit() {
    this._caseService.GetCaseData('en', 'English');
    this.subscription = this._caseService.caseData$.subscribe(res => { this.caseData = res },
      (error) => { console.log(error) });
  }

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

score 0 · Answer 4 · answered Jan 18 '18 at 17:11

For better way to handle subscription I recommend checking these two links:

https://medium.com/thecodecampus-knowledge/the-easiest-way-to-unsubscribe-from-observables-in-angular-5abde80a5ae3

and

Angular/RxJs When should I unsubscribe from `Subscription`

unsubscribe does not exist on type Observable<>?

4 Answers4