Angular 2 subscription

Question

Can someone explain me difference between this two ways of subscription, first case

 this.incMatService.incomingMaterialUpdate$.subscribe((model) => { try { code here } catch (error) { console.log(error); } }); this.incMatService.incomingMaterialNew$.subscribe((x) => { try { this.imForm = this.initImForm(); } catch (error) { console.log(error); } })

and second case

subscription: Subscription; subscriptionToAdd: Subscription; subscription = this.incMatService.incomingMaterialUpdate$.subscribe((model) => { try { code here } catch (error) { console.log(error); } }); subscriptionToAdd = this.incMatService.incomingMaterialNew$.subscribe((x) => { try { this.imForm = this.initImForm(); } catch (error) { console.log(error); } })

I know that in second case i have to unsubscribe(), i don't know how situation looks in the first case.

Other of code from my service

private updateIncomingMaterial = new ReplaySubject<IncomingMaterial>(0); private addNewIncomingMaterial = new Subject(); incomingMaterialUpdate$ = this.updateIncomingMaterial.asObservable(); incomingMaterialNew$ = this.addNewIncomingMaterial.asObservable(); updateIncMaterial(incomingMaterialToUpdate: IncomingMaterial) { this.updateIncomingMaterial.next(incomingMaterialToUpdate); } addNewIncMaterial(){ this.addNewIncomingMaterial.next(); }

I emit this events in one component and subscripe in another one like i show in example

JB Nizet · Accepted Answer · 2017-01-08 12:30:12Z

3

The difference is that in the second case, you store the subscription in a variable, whereas you don't in the first case.

Whether you need to unsubscribe or not is unrelated. If the observable has a longer life-cycle than your component (i.e. it keeps existing and emitting events even after your component is destroyed), then you need to unsubscribe, and thus store the subscription in a variable to be able to do it. Otherwise you'll have a memory leak, and will keep executing code each time an event is emitted, for nothing.

answered Jan 8, 2017 at 12:30

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

9 Comments

Stefan Over a year ago

So if I don't do it by the variable I become liable for a memory leak?

JB Nizet Over a year ago

No. If you don't unsubscribe, you'll have a memory leak. And since you must unsubscribe, you must keep a reference to the subscription, and thus store it in a variable, in order to call unsubscribe() later.

Stefan Over a year ago

So how to recognize which case is better, becouse like i understand in my first case i can't unsubscribe so it possible that i will have a memory leak.

JB Nizet Over a year ago

So, don't you have your answer? Do you prefer a solution which leaks memory, or a solution which doesn't?

Stefan Over a year ago

This one which doesn't :)

|

Dorus · Accepted Answer · 2017-01-08 15:00:42Z

1

In the first case you simply lose reference tot he subscription, so you cannot even cancel it. Usually this is done on sources that end naturally anyway so there is no need to cancel. You can also modify the source to cancel when you no longer need it with .takeUntil(endEvent$) instead of calling .unsubscribe().

edited Jan 8, 2017 at 15:00

answered Jan 8, 2017 at 12:34

Dorus

7,5761 gold badge32 silver badges38 bronze badges

2 Comments

Stefan Over a year ago

So how to recognize which case is better, becouse like i understand in my first case i can't unsubscribe so it possible that i will have a memory leak?

Dorus Over a year ago

@Stefan If you use takeUntil properly, it will not leak either. Because when the observable inside takeUntil fires, it will complete and GC all resources associated with the stream.

Collectives™ on Stack Overflow

Angular 2 subscription

2 Answers 2

9 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Related