correctly unsubscribe post / put / patch / delete in Angular

Question

I was wondering what is the best way to unsubscribe a post / put / patch / delete on the HTTP service

for example, given this method, called in a page to save an object:

public add(obj) {
const sub = this.service.post('/path/to/resource', obj).subscribe(()=>{
console.log('saved');
sub.unsubscribe();
});
}

Do I need to unsubscribe it and did I correctly unsubscribed it?

Updated: Please note that this add method will be called multiple times!

Update 2: Yes it is an HttpClient service

Have a Look at [this](https://stackoverflow.com/questions/35042929/ist-it-necessary-to-unsubscribe-from-observables-created-by-http-methods) — Vikas, Jun 19 '18 at 12:52
Is `service` Angular's `HttpClient`? If so, you do **not** have to unsubscribe. It is done for you. See the answer linked by @Vikas — Sean Bright, Jun 19 '18 at 13:51
Possible duplicate of [Ist it necessary to unsubscribe from observables created by Http methods?](https://stackoverflow.com/questions/35042929/ist-it-necessary-to-unsubscribe-from-observables-created-by-http-methods) — Sean Bright, Jun 19 '18 at 14:15
There is so much misinformation in the existing answers that this question is doing more harm than good. In the _general_ case you want to explicitly unsubscribe from all `Observable`s. For the `Observable`s returned by Angular's `HttpClient` you do not need to unsubscribe as this is done for you. — Sean Bright, Jun 19 '18 at 14:17
I asked a similar question to this. look at the accepted answer https://stackoverflow.com/questions/49801713/angular-proper-time-to-unsubscribe — rhavelka, Jun 19 '18 at 15:24

score 1 · Answer 1 · answered Jun 19 '18 at 14:24

The following will work fine and will not leak subscriptions:

public add(obj) {
    this.service.post('/path/to/resource', obj)
        .subscribe(() => {
            console.log('saved');
        });
}

Any subscriptions to the Observables returned by HttpClient's methods are automatically unsubscribed. There is no need to do any explicit subscription management here.

Pardeep Jain · Answer 2 · 2018-06-19T13:00:28.930

Do I need to unsubscribe it

Yes, In case your page has multiple HTTP calls, and you want to unsubscribe all calls on routing/page changes etc. then you need to unsubscribe all calls.

did I correctly unsubscribed it

No, You unsubscribed to HTTP Call immediately after calling, the Best place to unsubscribe HTTP call is ngOnDestroy life cycle hook of the component by Angular. Like this -

ngOnDestroy(){
   sub.unsubscribe();
}

Sachila Ranawaka · Answer 3 · 2018-06-19T12:56:51.123

0

use the ngOnDestroy life cycle const sub;

  public add(obj) {
    sub = this.service.post('/path/to/resource', obj).subscribe(()=>{
      console.log('saved');
      sub.unsubscribe();
    });
  }
  ngOnDestroy() { 
        sub.unsubscribe();
  }

If you have multiple observables that subscribes then i would suggest to use and subscription array and then destroy it.

private subscriptions: Subscription[] = [];

public add(obj) {
   subscriptions.push(this.service.post('/path/to/resource', obj).subscribe(()=> 
   {
    console.log('saved');
    sub.unsubscribe();
  }));
}
ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
        subscription.unsubscribe();
    });
}

edited Jun 19 '18 at 12:56

answered Jun 19 '18 at 12:54

Sachila Ranawaka

39,756
7
56
80

Does it really need to `unsubscribe` within the subscribe call as you did in your answer? – Pardeep Jain Jun 19 '18 at 12:55
1

yes, because unnecessary subscribers will lead to memory leaks – Sachila Ranawaka Jun 19 '18 at 13:00
All of this code is completely unnecessary in the case of `HttpClient` – Sean Bright Jun 19 '18 at 14:27

score 0 · Answer 4 · answered Jun 19 '18 at 12:55

Not necessarily should you unsubscribe BUT it is best practice to unsubscribe to prevent memory leaks.

DO SOMETHING LIKE THIS:

add(obj){
    this.sub = this.service.post('/path/to/resource', obj).subscribe(()=>{
    console.log('saved');
    });
}

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

correctly unsubscribe post / put / patch / delete in Angular

4 Answers4