Emitted number from Angular Element turns into string when reaching javascript event listener

Question

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?

anonDelta · Accepted Answer · 2022-06-22 18:58:34Z

-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

answered Jun 22, 2022 at 18:58

anonDelta

619 bronze badges

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

2 Comments

Frank Jusnes Over a year ago

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.

anonDelta Over a year ago

@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: stackoverflow.com/questions/58688500/… angular.io/guide/elements developer.mozilla.org/en-US/docs/Web/Events/… Maybe some of this can help you.

Collectives™ on Stack Overflow

Emitted number from Angular Element turns into string when reaching javascript event listener

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related