Listen to Angular web component EventEmitter into javascript

Question

I have a created a small web component with the help of this article using angular element which includes @Input and @Output.

I am able to pass data to @Input property but listening to the @Output event is making me crazy as I am unable to figure out how to read data from the callback event parameter.

//Emitting the boolean data
likeEvent() { 
    this.likeNotify.emit(true);
}

And in pure javascript I am listening to likeNotify event like this:

const el = document.querySelector('facebook-card');
      el.addEventListener('likeNotify', e => {
        console.log(e.currentTarget.data); // Not working
      });

So How can I retrieve true/false value from e object passed from emitter?

That's not the Angular way... I assume you include the `selector` of the emitting component in your html somewhere? You can hook into the output there. for example: `` — Carsten, Nov 04 '19 at 06:59
@Carsten these are web-components, something different than you think. Anyways, as far as I know, the event value itself should have the boolean. So you can do `console.log(e)` and it should log `true` — Poul Kruijt, Nov 04 '19 at 07:03
@Carsten that's okay :) I was also wrong, apparently it's the `event.detail` that will contain the event data — Poul Kruijt, Nov 04 '19 at 07:12
@Carsten, ```event.detail``` is what I was looking for, works like a charm. — Shail_bee, Nov 04 '19 at 07:54

Poul Kruijt · Accepted Answer · 2019-11-04T07:19:18.953

The data transmitted through the Output in a web-component can be read from the event.detail property:

const el = document.querySelector('facebook-card');

el.addEventListener('likeNotify', (event) => console.log(event.detail));

For more details you can read here

Component outputs are dispatched as HTML Custom Events, with the name of the custom event matching the output name. For example, for a component with @Output() valueChanged = new EventEmitter(), the corresponding custom element will dispatch events with the name "valueChanged", and the emitted data will be stored on the event’s detail property. If you provide an alias, that value is used; for example, @Output('myClick') clicks = new EventEmitter<string>(); results in dispatch events with the name "myClick".

score 1 · Answer 2 · answered Jan 04 '21 at 19:22

I've recently built a small web component with Angular Elements using Angular 11. I was not able to get data from my event with event.detail, I found out that the data appears to be on event.originalEvent.detail. so it would be something like: el.addEventListener('likeNotify', (event) => console.log(event.originalEvent.detail));

score 0 · Answer 3 · answered Mar 22 '22 at 14:50

if you get "Cannot read properties of undefined (reading 'emit')" like in my case. the next few lines might help.

if(this.itemSelectedEvent) this.itemSelectedEvent.emit(selectedItem);
else{
  let thisHtml = ((this as any) as HTMLElement);
  if(thisHtml?.dispatchEvent) thisHtml.dispatchEvent(new CustomEvent('onItemSelected', { detail: {selectedItem} }));
}

Listen to Angular web component EventEmitter into javascript

3 Answers3

Linked