22

I have a GridComponent inside a PopupComponent.

I want to send an "RowSelected" custom event to a component outside of PopupComponent.

I am currently sending the event from GridComponent to PopupComponent and forwarding it to the outside. This is an very painful approach since I plan on having tons of PopupComponents.

Is there any other way to do event forwarding?

Luka Šilje
  • 605
  • 2
  • 8
  • 19
  • 4
    Use a service with a Subject, see https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service – Mark Rajcok Apr 06 '16 at 19:17
  • Do you know if different **GridComponent**s (ex. one contains people and the other contains jobs) will share the same service? That would be unfortunate for me. – Luka Šilje Apr 06 '16 at 19:41
  • Each GridComponent can have its own instance of some service. In addition, you can also have a single instance of some other OutsideService for some collection of GridComponents. – Mark Rajcok Apr 06 '16 at 19:49
  • I asked this question in reddit.com/r/angular2 a while ago too. One of the recommended way is using Observable. – Jek Apr 07 '16 at 02:39

1 Answers1

35

Whenever you don't have a direct parent → child relationship, use a (shared) service to share data and/or send events.

Inside the service, use a Subject or an Observable to accomplish this.

The cookbook has an example of how to use a Subject to achieve bi-directional communication between components.

This SO post, Delegation: EventEmitter or Observable in Angular2, has an example of how to use an Observable.

Community
  • 1
  • 1
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
  • Thank you! Everything works nicely when there is a parent=>grandchild, but when the "grandchild" is alone in the context of the application, it tells: `No provider for service (grandchild -> service)` – Luka Šilje Apr 10 '16 at 15:59
  • 1
    @LukaŠilje, it sounds like you do not have a service defined (using `providers`) high enough up in your hierarchy of components. I suggest you take a look at the [Hierarchical Injectors doc](https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html). – Mark Rajcok Apr 11 '16 at 14:16
  • Hello again. It was working until I converted to release (2.0.0). Any idea? I am injecting the service into providers of the AppComponent. – Luka Šilje Oct 08 '16 at 17:37
  • It seems they don't have the same service. I used the BehaviorSubject to see the value and it is always null in one component and not null in the other. – Luka Šilje Oct 08 '16 at 18:06
  • 1
    @LukaŠilje, see https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-root-component-or-module -- provide your service in the AppModule rather than in AppComponent. – Mark Rajcok Oct 08 '16 at 18:37
  • Thank you! It really solved my problem. In every component that used the common service I had "providers:[thatCommonService]" instead of declaring it only in one place (module). I am not used to the module thing yet. – Luka Šilje Oct 08 '16 at 18:46