0

I have created a web component in Angular Elements which defines and emits events like this:

@Input() groupId: number = -1;

@Output('group_change') groupChange!: EventEmitter<number>;
...
this.groupChange.emit(groupId);

I have added the web component to a pure JavaScript web application, and also added an event listener to catch the event:

this.myAngularElement.addEventListener('group_change', evt => {
    console.log(evt);
});

What is unexpected is that the number has been converted to a string in the event listener. Is there an explanation for why this happens, and maybe even a way to prevent it?

Frank Jusnes
  • 175
  • 1
  • 13

1 Answers1

-1

Well, everything that goes through actual DOM will be a string in the end. HTML doesn't know numbers. How is Angular expected to know that is a number when you get it from outside the application with an event listener? That is however not the proper way of implementing a two-way binding in Angular. You can reference this documentation for more details: https://angular.io/guide/two-way-binding

anonDelta
  • 37
  • 9
  • Thanks for replying, but I don't follow you. The event receiver is in my pure javascript application (not an Angular application). The web component, which emits the event, is written in Angular, and built as an Angular Elements component. In fact the component is a rewrite of an pure web component, that was written in javascript. Dispatching events from the pure web component didn't convert the number to a string. Also I don't see what two-way binding has to do with this, but is just part of the misunderstanding. Sorry for not explaining this better. – Frank Jusnes Jun 22 '22 at 21:08
  • 1
    @FrankJusnes Oh, I'm sorry then, I can't help. I have no experience in this regard. Maybe I've misread the post or you edited it but now that I've read it again I've realized that the issue is not what I thought initially. All I could find is these sources in this regard: https://stackoverflow.com/questions/58688500/listen-to-angular-web-component-eventemitter-into-javascript#58688709 https://angular.io/guide/elements https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events Maybe some of this can help you. – anonDelta Jun 22 '22 at 21:55