# How to use Event Aggregator as Transient with Custom Element?

**URL:** <https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181>\
**Category:** Help Requests\
**Created:** [January 22, 2020, 6:30pm UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181 "2020-01-22T18:30:55Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 23, 2020, 4:00pm UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/21 "2020-01-23T16:00:19Z")

</div>

Dont wanna be the boo man here but one of your i18n related unit tests failed for me when i cloned your repo. Guess its because of different timezones.

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [January 23, 2020, 4:04pm UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/22 "2020-01-23T16:04:14Z")

</div>

Haha yeah I had some date check failed at some point on CircleCI, which I don’t know what TZ they use. I might have hacked a test or two just to get it going on CircleCI. The date TZ stuff are not really big tests that I care. Anywho, you can maybe tell me which test that is and I can take a look to see if I can tweak it, thanks.

I’m on the Eastern TimeZone (North America) and I know you’re on a different TZ.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 23, 2020, 5:03pm UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/23 "2020-01-23T17:03:40Z")

</div>

I think all you’d need to do for the tests is to fix the tz like here [https://github.com/aurelia/i18n/blob/master/test/unit/dfvalueconverter.spec.ts#L64](https://github.com/aurelia/i18n/blob/master/test/unit/dfvalueconverter.spec.ts#L64)

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 24, 2020, 10:30pm UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/24 "2020-01-24T22:30:49Z")

</div>

You can’t “new” arrow function. It probably works with Jest because it was transpiled to ES5.  
 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/8/87d563526741363ab834613fda17a7de9f9d1657.png)

Just in case you hit it in the future

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [January 25, 2020, 1:39am UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/25 "2020-01-25T01:39:26Z")

</div>

@bigopon  
My Jest unit tests are all written in TypeScript, so I usually do it with the arrow function since the linter will complain if I don’t.

I have another issue though, I looked at your sandbox again and I understand how to have a global and a local instance of the Event Aggregator but how do I get access to the global one from my Services and from the Pagination child component? I have a few subscribed events when the I18N locale changed, and now they are all broken except for the ones that are in the parent component, for example the grid column headers are being translated because the code is in the parent component but the ones in the pagination component are no longer being translated because the injected EA is the local EA one. Is there a way to alias that or something? in the sandbox you did name it `parent_not_global_Ea` in the child component.

EDIT

After some digging in the Aurelia-I18N lib, I found that we can have access to it’s internal EA directly from the I18N Service with `this.i18n.ea.subscribe('i18n:locale:changed', () => {})` and that will do it for my usage.

I still would like to know how to access both Global DI from Services or Child Component, but at least now I can work around it.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 25, 2020, 10:28am UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/26 "2020-01-25T10:28:17Z")

</div>

May I know why aliasing with `NewInstance.of().as` didn’t work for you? It’s working for me here [https://codesandbox.io/s/httpsdiscourseaureliaiothow-to-use-event-aggregator-as-transient-with-custom-element3181-o3e2b](https://codesandbox.io/s/httpsdiscourseaureliaiothow-to-use-event-aggregator-as-transient-with-custom-element3181-o3e2b)

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [January 25, 2020, 4:33pm UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/27 "2020-01-25T16:33:58Z")

</div>

Thanks, I did see the `NewInstance.of().as()` in the docs but I couldn’t find any examples in the docs neither online and the `d.ts` didn’t help either. When I tried it, I thought it was a string name aliasing `as('string')` but that didn’t work. I see you updated the sandbox and now I understand how to use it, it would help so much to have this in the docs. Does the aliased class have to have all the methods? Because I don’t see `SlickgridEa` being extended from `EventAggregator`and it’s missing the `dispose`, does it have to be defined or that doesn’t matter?

Thanks again

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 25, 2020, 9:33pm UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/28 "2020-01-25T21:33:23Z")

</div>

The purpose of alias is to alter the key required to retrieve an instance.

In this case, the flow is like this:

- we want to retrieve an instance of `EventAggregator`, `EventAggregator` was used to inject the instance in `Child` via `@inject(EventAggregator)`
- we want to scope an `EventAggregator` per instance of `Parent`, so we use `NewInstance.of(EventAggregator)`
- we want to avoid scoping issue, since only `Child` wishes to get the scoped `EventAggregator` instance, while other `Child_x`s don’t. so we need another way to retrieve it without blocking others.
- We used `NewInstance.of().As(SlickGridEa)` to scope `EventAggregator` and make it only retrievable via the alias `SlickGridEa` ([https://github.com/aurelia/dependency-injection/blob/191d7d68cd0271a985178e770dd6b64d8cf9c418/src/resolvers.ts#L439](https://github.com/aurelia/dependency-injection/blob/191d7d68cd0271a985178e770dd6b64d8cf9c418/src/resolvers.ts#L439)). So `SlickGridEa` is basically is just a key to get our scoped `EventAggregator` instance, and provides strict typing for event name. What constructor that will actually be invoked is the `EventAggregator`

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [January 25, 2020, 10:10pm UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/29 "2020-01-25T22:10:47Z")

</div>

Thanks again, I’m starting to see the power of these DI wording. I rewrote all of my Services and Custom Elements to now use whichever I need and when I want both I now have

```auto
@inject(EventAggregator, SlickgridEventAggregator)

export MyClass {
  constructor(private globalEa: EventAggregator, private pluginEa: SlickgridEventAggregator) {}

```

This is powerful and awesome!

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [January 25, 2020, 11:24pm UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/30 "2020-01-25T23:24:09Z")

</div>

Now I have yet another question, how do we extend the Event Aggregator from the at alias? This is following a new issue that I’ve opened today in the Event Aggregator lib (this [issue](https://github.com/aurelia/event-aggregator/issues/43)) which Rob replied [here](https://github.com/aurelia/event-aggregator/issues/43#issuecomment-578447015) that I should extend the EA class

I tried changing the absctract class that you provided and change it into an extended class of the Event Aggregator but that doesn’t seem to work.

```ts
export class SlickgridEventAggregator extends EventAggregator {
  constructor() {
    super();
  }

  publish(event: string, data: any): void {
    // do something before calling super
    super.publish(event, data);
  }

  subscribe(event: string, callback: (data: any) => void): Disposable {
    // do something before calling super
    return super.subscribe(event, callback);
  }
}

```

I added a bunch of console log and nothing shows up, is that supposed to be only an abstract interface that I can’t extend? Sorry about all of these questions, I feel like I still have a lot to learn.

Probably because of what you wrote in previous post?

> `SlickGridEa` is basically is just a key to get our scoped `EventAggregator` instance, and provides strict typing for event name. What constructor that will actually be invoked is the `EventAggregator`

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 25, 2020, 11:56pm UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/31 "2020-01-25T23:56:47Z")

</div>

If you extended jt, then you can use the subclass as the key, or just inject the subclass. The only reason we went for aliasing was because we wanted to avoid conflict. Since you already have your own internal key (subclass), theres no need to do anything extra

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [January 26, 2020, 5:49am UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/32 "2020-01-26T05:49:18Z")

</div>

Ok I was confused at first, but I think I understand now and that make sense, so if I understood correctly then you mean to change `NewInstance.of(EventAggregator).as(SlickgridEventAggregator)` into this `NewInstance.of(SlickgridEventAggregator)`and there’s no need for alias since the class name is now unique. I tried it and that seems to work, so I think I’m finally good now.

Thanks for everything, really appreciate your time in helping others like me 😉

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 26, 2020, 6:11am UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/33 "2020-01-26T06:11:12Z")

</div>

I’m glad we had this discussion, as we can finally have a Q/A topic that demonstrates:

- how to scope a class to your plugin custom element
- how to extend event aggregator and do your custom stuff (Non-existence, can you doc it here or somewhere please, my turn to ask for help 😛)

btw, if your constructor only call super then probably you don’t need it

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [January 26, 2020, 6:46am UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/34 "2020-01-26T06:46:25Z")

</div>

Ahh really, I thought it was required to call the super constructor so that it instantiate the class. I didn’t know we could go without it. I removed it like you said and pasted the remaining code in the [issue](https://github.com/aurelia/event-aggregator/issues/43#issuecomment-578473400) I had previously opened.

Hmm I’m not sure if I’m the right person to explain it in docs, but I can try to help a bit yeah since you provided me lot of good information. What did you have in mind? Would that be to extend on this [doc](https://aurelia.io/docs/fundamentals/dependency-injection#resolvers) or something else? I’m not even sure where the docs code is.

I do like the flow that we followed together, we covered lot of good stuff with DI and Event Aggregator, that certain flow might be explainable in a doc as a sample.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 26, 2020, 7:20am UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/35 "2020-01-26T07:20:31Z")

</div>

Yes, that section would be very useful, and our chat will be a very nice example for that

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [January 30, 2020, 4:09am UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/36 "2020-01-30T04:09:31Z")

</div>

Hello @bigopon, I’m not sure if this is what you wanted but I spent an hour writing this [Event Aggregator - Use Cases](https://github.com/ghiscoding/aurelia-slickgrid/wiki/Event-Aggregator---Use-Cases) Wiki. It has 4 unit cases, which were all related to our conversation. I’ve created the Wiki under my Aurelia-Slickgrid lib, just for a placeholder, you can also edit the Wiki if you wish to adjust some of the text. Is that what you were looking for? I don’t think I used all the correct wording, so feel free to update.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 30, 2020, 10:01pm UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/37 "2020-01-30T22:01:36Z")

</div>

Nice, looks pretty good to me. I was asking fornhelp with our official docnbut i guess that will do, i probably need to bookmark this for later to show as exmple for other similar Qs

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [January 31, 2020, 4:38am UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/38 "2020-01-31T04:38:23Z")

</div>

Thanks, it might be lengthy for a doc… however the fact is that it’s the kind of doc I like to read, with brief use cases and some code samples to demo them.

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [January 31, 2020, 3:52pm UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/39 "2020-01-31T15:52:13Z")

</div>

Also just to provide more details about the kind of docs that I like to read, MDN (which is now used in VSCode intellisense for any html/css selector), they have wonderful docs that are super easy to understand with enough details, for instance see [Array.prototype.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). They provide a set of use cases that are easy to understand, I see a lot of Stack Overflow references to their docs as well. They have the best docs I’ve seen

in Aurelia we can find this tutorial [adding pub/sub messaging](https://aurelia.io/docs/tutorials/creating-a-contact-manager#adding-pubsub-messaging) which is similar in some ways, however I don’t think we need to provide a full and lengthy story. I would prefer to see docs like MDN and/or like the one I wrote. That would be easier to search and follow.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 1, 2020, 11:05am UTC](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181/40 "2020-02-01T11:05:07Z")

</div>

Yes, I your observation & conclusion is on point. That is probably could be a lot better for us. Tons of example in every corner

Looping @EisenbergEffect into this

[Previous page](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181.md?page=1)

[Next page](https://discourse.aurelia.io/t/how-to-use-event-aggregator-as-transient-with-custom-element/3181.md?page=3)