Angular2: EventEmitter based service too many calls

Question

So I have an EventEmitter service that I want to use in order to share data between components, here is the code

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class ObservableService {
    data = [];
    eventEmitter: EventEmitter<any> = new EventEmitter();

    setSharedData(key, value) {
        this.data[key] = value;
        this.eventEmitter.emit(this.data);
    }

    getSharedData() {
        return this.data;
    }
}

And here is how I want to use it

 ngOnInit() {
        this._observable.eventEmitter.subscribe((data) => {
            console.log('working');
            this.filter.emit(data);
        })
    }

So, everything works perfect except one thing - console log showing working sign 13 times!

Where this strange behavior goes from?

`EventEmitter` is not supposed to be used in services. `EventEmitter` is for `@Output()` only. Just use a `Subject`. This won't change anything with your problem. To your problem. Just don't call `setSharedData` more often than you want the event be emitted. — Günter Zöchbauer, Dec 23 '16 at 09:47
I guess you are calling `setSharedData` directly or indirectly from a binding in a components template which is invoked every time Angular runs change detection, but this part is missing in your question and therefore it's hard to give advice. In general don't call functions in bindings. — Günter Zöchbauer, Dec 23 '16 at 09:59
Actually yes, I'm calling `setSharedData` like so `(change)="onChange($event)"`, is there any way to work around it? — Majesty, Dec 23 '16 at 10:04
Calling methods for events is fine, just not from value bindings like `[prop]="calcMe()"` or `
{{calcMe()}}
`. If you call it only from that event handler means, that the event does happen that often. — Günter Zöchbauer, Dec 23 '16 at 10:06
Actually I have a `select` html input and I want to send data to service each time it changed, how is it possible without value bindings like `[prop]="calcMe()"`? — Majesty, Dec 23 '16 at 10:09
I didn't say that you can or should do this. I'm just making assumptions because your question doesn't contain any information about how or when `setSharedData` is called so often. All I can derive from your question is, that it is called more often that you expect it to be called. — Günter Zöchbauer, Dec 23 '16 at 10:14

score 1 · Accepted Answer · answered Dec 23 '16 at 09:47

EventEmitter are used to raise custom events from directive or component. Its not advisable to use it inside service as you have used.

You should use Observable inside your service so that you can subscribe for it inside your Component.

Check Parent and children communicate via a service to know how to use Observable.

score -2 · Answer 2 · answered Dec 23 '16 at 09:54

EventEmitter do not function. I think you should use @Output with EventEmitter:

import { Injectable, EventEmitter, Output } from '@angular/core';

@Injectable()
@Component({
selector: 'sector'
})
export class ObservableService {
    data = [];
    @Output eventEmitter: EventEmitter<any> = new EventEmitter();

    setSharedData(key, value) {
        this.data[key] = value;
        this.eventEmitter.emit(this.data);
    }

    getSharedData() {
        return this.data;
    }
}

and HTML

   <sector (eventEmitter)="_eventEmitter" ></sector>

component

 _eventEmitter: any;
 ngOnInit() {
        this.filter = this._eventEmitter;
    }

Angular2: EventEmitter based service too many calls

2 Answers2