36154

Angular Elements EventEmmitter : $event not showing emitted value

<h3>Question</h3>

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.


<h3>Answer1:</h3>

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

<blockquote>

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

</blockquote>

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


<h3>Answer2:</h3>

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

来源:https://stackoverflow.com/questions/57215011/angular-elements-eventemmitter-event-not-showing-emitted-value

Recommend

  • Activate missing Winforms controls in .Net Core 3.1 [closed]
  • Angular Elements EventEmmitter : $event not showing emitted value
  • Customize Scrolling indicator
  • What is the correct way to test Unicode support in a Smalltalk implementation?
  • How do you use typed errors in async catch()
  • Return not in function
  • How to exclude devices with lower GPU in Android? [duplicate]
  • sqlite filter by day of the week in one statement
  • Can we implement some code that fires upon selecting something in google document?
  • C++ Function Overriding not working?
  • How to Dynamically Remove component in ComponentResolveFactory
  • GBP pound symbol appearing as uknown char in shop
  • Compress bitmap to a specific byte size in Android
  • Add class to parent element
  • Ioniv-v4 : ionic cordova plugin add cordova-plugin-googleplus Not working
  • What happens when one of the Kafka replicas is down
  • Cron and nightmarejs
  • Pass multiple lines of stdin input to interactive Java command line program, non-interactively
  • why 'read' command in shell script is missing initial characters? [duplicate]
  • connect.cookieParser and connect.session
  • Laravel 5 - Cache remember doesn't work
  • create circular Auto Horizontal Scroll View?
  • Getting/building the SQL (with parameters) from NHibernate 3.2
  • SQL query for game rental website - game delivery report
  • Validating my form with Jquery
  • Authorize Attribute Authentication with Postman in Web Api
  • Extracting a small subset of data from XMLs
  • Query takes almost two seconds but matches only two rows - why isn't the index helping?
  • Copy and paste data from multiple workbooks to a worksheet in another Workbook
  • Multiplying polynomials/simplifying like terms
  • using maven pom while creating jar:test-jar some times it says JAR will be empty - no content was ma
  • jQuery scrollTop if URL has hash
  • How to decleare char *const argv[] in swift [duplicate]
  • ssh remote server login script
  • How to use FirstOrDefault inside Include
  • PHP Permalinks.. how to change?
  • Running R's aov() mixed effects model from Python using rpy2
  • ReferenceError: TextEncoder is not defined