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: <my-component (likeNotify)="callFunction()"></my-component> — Carsten
– Carsten, Commented Nov 4, 2019 at 6: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
– Poul Kruijt, Commented Nov 4, 2019 at 7:03
@Carsten that's okay :) I was also wrong, apparently it's the event.detail that will contain the event data — Poul Kruijt
– Poul Kruijt, Commented Nov 4, 2019 at 7:12
@Carsten, event.detail is what I was looking for, works like a charm. — Shail_bee
– Shail_bee, Commented Nov 4, 2019 at 7:54

Poul Kruijt · Accepted Answer · 2019-11-04 07:19:18Z

21

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".

edited Nov 4, 2019 at 7:19

answered Nov 4, 2019 at 7:12

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chris c · Accepted Answer · 2021-01-04 19:22:26Z

1

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));

answered Jan 4, 2021 at 19:22

chris c

4114 silver badges5 bronze badges

Comments

Muhammed ASLAN · Accepted Answer · 2022-03-22 14:50:25Z

0

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} }));
}

answered Mar 22, 2022 at 14:50

Muhammed ASLAN

1901 silver badge6 bronze badges

Collectives™ on Stack Overflow

Listen to Angular web component EventEmitter into javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related