ReactiveX JS and TypeScript - How to unsubscribe?

Question

I've been attempting to implement a new rxjs Observable in an Angular 2 component using TypeScript. I have created a service, MyService that returns an observable in one of its methods, e.g.,

export class MyService {

    getMyObs(){
        return new Observable(observer => {
            observer.next(42);
        });
    }
}

Then in my Angular 2 component I subscribe to this observable in OnInit, e.g.,

export class MyComponent implements OnInit {
obs: any;

constructor(private myService: MyService){};    

    ngOnInit {
        this.obs = myService.getMyObs().subscribe(data => {
            // Do stuff here...
        });
    }    
}

The RxJs documentation talks about unsubscribing from your observable such that your observable knows to no longer emit messages to your observer. Therefore, I figured I should be unsubscribing from the observable when my component gets destroyed, something like

export class MyComponent implements OnInit, OnDestroy {
obs: any;

constructor(private myService: MyService){};    

    ngOnInit {
        this.obs = myService.getMyObs().subscribe(data => {
            // Do stuff here...
        });
    } 

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

Whilst this makes sense to me, the typescript compiler throws (and indeed the application throws) saying there is no unsubscribe method. There appears to be no such method described in the type definition files. How do I correctly unsubscribe from an observable using TypeScript?

Oleksandr T. · Accepted Answer · 2016-08-08 12:01:21Z

4

You need add unsubscribe method to your Observable., Disposing Observable Executions

return new Observable(observer => {
  observer.next(42);

  return () => {
    console.log('unsubscribe')
  }
});

answered Aug 8, 2016 at 12:01

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Memmo Over a year ago

Can we do it also in Angular 8?

Thierry Templier · Accepted Answer · 2016-08-08 12:22:20Z

1

You can find the definition of the unsubscribe method in the Subscription.d.ts (class Subscription) of the Rxjs module.

As a matter of fact, you unsubscribe a subscription and not an observable.

answered Aug 8, 2016 at 12:22

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Comments

Supun Dharmarathne · Accepted Answer · 2018-02-22 08:56:10Z

1

First create Subscription as follow.

private obs: Subscription = new Subscription();

Then assign to observable.

this.obs = myService.getMyObs().subscribe(data => {
       if(data !== null){
        this.obs.unsubscribe()
         }
    });

answered Feb 22, 2018 at 8:56

Supun Dharmarathne

1,1481 gold badge10 silver badges19 bronze badges

Collectives™ on Stack Overflow

ReactiveX JS and TypeScript - How to unsubscribe?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related