How to unsubscribe from EventEmitter in Angular 2?

angular rxjs eventemitter
tom10271 picture tom10271 · Apr 8, 2016 · Viewed 21.7k times · Source 
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

Answer

G&#252;nter Z&#246;chbauer picture Günter Zöchbauer · Apr 8, 2016

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.

Related questions

Angular2: mouse event handling (movement relative to current position)

My user should be able to move (or rotate) an object by mouse in a canvas. When mouse events occur the screen coordinates are used to calculate the delta (direction and length) to the last event. Nothing special... mousedown (get …

Read More
Child listens for parent event in Angular 2

In angular docs there is a topic about listening for child events from parents. That's fine. But my purpose is something reverse!. In my app there is an 'admin.component' that holds the layout view of admin page (sidebar menu,…

Read More
How to subscribe to event emitter once?

// Part of service public someEvent: EventEmitter<number> = new EventEmitter(); .... // Component @Component({ selector: 'some-component', template: `...` }) export class SomeComponent { constructor(public service: Service) { this.service.someEvent.subscribe((x) => { // Do something }); } } SomeComponent is displayed in / route. When I navigate to …

Read More