CODEWITHSUNDEEP
javascriptangularweb-componentangular-elementsangular-event-emitter
Shail_bee
Shail_bee

Reputation: 509

Listen to Angular web component EventEmitter into javascript

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?

Upvotes: 7

Views: 9070

Answers (3)

Muhammed ASLAN
Muhammed ASLAN

Reputation: 190

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

Upvotes: 0

chris c
chris c

Reputation: 401

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

Upvotes: 1

Poul Kruijt
Poul Kruijt

Reputation: 71891

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

Upvotes: 21

Related Questions