How to unsubscribe from EventEmitter in Angular 2?

Question

export declare class EventEmitter<T> extends Subject<T> {
    /**
     * Creates an instance of [EventEmitter], which depending on [isAsync],
     * delivers events synchronously or asynchronously.
     */
    constructor(isAsync?: boolean);
    emit(value: T): void;
    /**
     * @deprecated - use .emit(value) instead
     */
    next(value: any): void;
    subscribe(generatorOrNext?: any, error?: any, complete?: any): any;
}

In Official Angular 2 Typescript definition, seems it has no way to mute or unsubscribe from EventEmitter.

I got callback over time as pages use the same EventEmitter

Show how you're using the event emitter instead – Chrillewoodz Apr 08 '16 at 08:05 — Chrillewoodz, Apr 08 '16 at 08:05

Günter Zöchbauer · Accepted Answer · 2018-01-22T13:47:24.883

56

EventEmitter extends Subject. When you subscribe to a subject you get a Subscription which you can later use to unsubscribe.

someOutput:EventEmitter = new EventEmitter();
...
this.subscription = someOutput.subscribe(...);
...
this.subscription.unsubscribe();

Hint
Don't use EventEmitter for anything else but @Output()s. Angular doesn't guarantee that EventEmitter will keep extending Subject or even work similar to a Subject in the future.

edited Jan 22 '18 at 13:47

answered Apr 08 '16 at 08:06

Günter Zöchbauer

623,577
216
2,003
1,567

1

Hey I believe your hint is in effect now. I believe it's now impossible to unsubscribe from the returned value, can you confirm? – Mathijs Segers Nov 01 '16 at 07:20
It still extends Subject in v5.x so this will still work - https://github.com/angular/angular/blob/5.2.1/packages/core/src/event_emitter.ts#L10-L116 – mcgraphix Jan 22 '18 at 13:46

score 13 · Answer 2 · edited May 23 '17 at 12:32

13

Because EventEmitters should only be used to emit events from components, and hence they should not be subscribed to, there is no need for Angular to provide a means to unsubscribe.

If you are not using an output property in a component, use an Observable or a Subject instead of an EventEmitter.

Maybe they should change the name to OutputPropertyEmitter.

edited May 23 '17 at 12:32

Community

1
1

answered Apr 08 '16 at 15:55

Mark Rajcok

362,217
114
495
492

2

Can you tell me how can I use Observable or Subject in this use case? – Anand Gupta Mar 24 '18 at 09:46

Jeremias Nater · Answer 3 · 2021-06-10T12:10:00.617

As mentioned by Günter Zöchbauer you can unsubscribe from EventEmitter as following:

someOutput: EventEmitter = new EventEmitter();
...
this.subscription = someOutput.subscribe(...);
...
this.subscription.unsubscribe();

Since Angular says you should not use EventEmitter for things other than @Output (taken from this post):

Quoting a comment from Rob Wormald

[...] EventEmitter is really an Angular abstraction, and should be used pretty much only for emitting custom Events in components. Otherwise, just use Rx as if it was any other library.

This is stated really clear in EventEmitter's documentation.

Use by directives and components to emit custom Events.

Instead you should be using the Rxjs Subject. EventEmitter extends the Rxjs Subject which means you can pretty much use it in the same way. Although you have to use the "subject.next()" function instead of "eventEmitter.emit()", subscribe and unsubscribe work the same.

someOutput: EventEmitter = new Subject();
...
this.subscription = someOutput.subscribe(...);
...
this.subscription.unsubscribe();

How to unsubscribe from EventEmitter in Angular 2?

3 Answers3

Linked