Angular Elements EventEmmitter : $event not showing emitted value

Question

I am stuck while working with Custom Angular Elements, Whenever i emit a value i.e true or false, it works fine while using element in same angular project, whenever i use the element in other project by creating its bundled JS file. It shows the Inputs events in the parent component.

This is my Angular Elements in Parent Component

<app-address [model]="address"  [isAddressValid]="isValid" 
(getValidity)="getValue($event)" placeholder="placeholder" label="label" isRequired="false" ></app-address>

In parent Component i am accessing value like

getValue(data) {
   console.log(data)
}

Instead of showing emitted data i.e true or false its showing me inputs event.

This is how i am importing file

import '../../../Elements/angular-address-element/elements/app-address-element'

Child Component

@Output() getValidity = new EventEmitter<any>();
this.getValidity.emit(true)

I am calling this emit on change event.

Show me the code how you emit the data in your child component — Tony Ngo, Jul 26 '19 at 07:23
@TonyNgo its showing me `$event` of input instead of `true` or `false` — Abdul Basit, Jul 26 '19 at 07:26
@Paul `true` or `false` are on the basis of conditions. It not showing true or false. Its showing event of input — Abdul Basit, Jul 26 '19 at 07:28
small improvement: use boolean instead of any here: @Output() getValidity = new EventEmitter(); — Kieran Ryan, Aug 10 '19 at 15:06
check this https://stackblitz.com/edit/angular-issue-repro2-ykz2nh — Nikhil K S, Oct 12 '20 at 06:41

score 6 · Accepted Answer · answered Jul 26 '19 at 07:35

Angular elements dispatch outputs as custom events document.createEvent('CustomEvent') . That means you will always get a proper event object and never a primitive.

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(); results in dispatch events with the name "myClick".

So your code should be something like: <some-element (someEvent)="eventHandler($event.detail)> </some-element>"

See:

https://blog.angularindepth.com/how-angular-elements-uses-custom-events-mechanism-to-transmit-components-outputs-outside-angular-7b469386f6e2

https://angular.io/guide/elements#mapping

Isn't there any better way than this? Better way like send only the $event.detail in the custom element itself? — Kavinda Jayakody, Apr 05 '20 at 19:05

score 0 · Answer 2 · answered Aug 10 '19 at 15:16

0

If you just want the boolean value emitted from the app-address component you'll need to check event.target.value or in your case data.target.value :-)

answered Aug 10 '19 at 15:16

Kieran Ryan

593
2
8
18

Angular Elements EventEmmitter : $event not showing emitted value

2 Answers2

Linked