How to unsubscribe from observable created by an Angular Service

Question

I'm pretty new to Angular and my question may seem basic but some guidance would be appreciated. I am currently writing an app to teach myself some real development skills. In my app I have an Angular Component that imports a service that I wrote that provides data.

This is my component

@Component({
  selector: 'music-instrument-list',
  templateUrl: './instrument-report.component.html',
  styleUrls: ['./instrument-report.component.css']
})
export class InstrumentReportComponent implements OnInit, OnDestroy {
    
    constructor(public apiService: ApiService) {}
    public availableInstruments: any[];

    ngOnInit() {
        this.apiService.getInstruments().subscribe((result) => {
            this.availableInstruments = result;
        });
    }

    ngOnDestroy() {
    // how do I unsubscribe?
    }
}

This is pretty simple but should I try to add this.apiService.getInstruments.unsubscribe() to the ngOnDestroy block I get the error that Property 'unsubscribe' does not exist on type => Observable'. I even considered add .unsubscribe() after the .subscribe() like chaining but this just makes my page hang. I get no error either. Can someone please tell me how to best unsubscribe? Do I need to assign the api call to a variable and then use .unsubscribe() on the varable name in the ngOnDestroy block

score 5 · Accepted Answer · edited Dec 13 '20 at 13:26

To avoide memory leaks you can unsubscribe from Observable through Subscription. For example:

    subscription: Subscription;

    ngOnInit() {
        this.subscription = this.apiService.getInstruments().subscribe((result) => {
            this.availableInstruments = result;
        });
    }

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

or using async pipe:

TypeScript:

    instruments$;

    ngOnInit() {
        this.instruments$= this.apiService.getInstruments().subscribe((result) => {
            this.availableInstruments = result;
        });
    }

HTML:

    <li *ngFor="let instr of instruments$ | async">
        {{ instr | json }} 
    </li>

score 2 · Answer 2 · edited Dec 15 '20 at 14:16

@Component({
  selector: 'music-instrument-list',
  templateUrl: './instrument-report.component.html',
  styleUrls: ['./instrument-report.component.css'],
})
export class InstrumentReportComponent implements OnInit, OnDestroy {
  subscription: Subscription;
  constructor(public apiService: ApiService) {}
  public availableInstruments: any[];

  ngOnInit() {
    this.subscription = this.apiService.getInstruments().subscribe((result) => {
      this.availableInstruments = result;
    });
  }

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

score 0 · Answer 3 · answered Aug 14 '19 at 11:49

You shouldn't unsubscribe from observables that complete automatically (e.g Http, calls). But it's necessary to unsubscribe from infinite observables like Observable.timer(). unsubscribe from Angular HTTP calls

as for unsubscribing in general, it is a duplicate question and it is answered here How to unsubscribe for an observable

score 0 · Answer 4 · answered Aug 14 '19 at 11:58

The newest and the cleaner way to handle an observer in angular is to use an async pipe in template component, its delegate the subscription and the destruction of the observable to the container framework. You can find more detailed example here(angular doc) : https://angular.io/api/common/AsyncPipe

How to unsubscribe from observable created by an Angular Service

4 Answers4