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?

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?

• javascript
• angular
• web-component
• angular-elements
• angular-event-emitter

• 1 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 Commented Nov 4, 2019 at 6:59
• 1 @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 Commented Nov 4, 2019 at 7:03
• @PierreDuc Oh whoops. My bad. I should start reading :) – Carsten Commented Nov 4, 2019 at 7:09
• @Carsten that's okay :) I was also wrong, apparently it's the event.detail that will contain the event data – Poul Kruijt Commented Nov 4, 2019 at 7:12
• @Carsten, event.detail is what I was looking for, works like a charm. – Shail_bee Commented Nov 4, 2019 at 7:54

3 Answers 3

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

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

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