Im building a web component with stencil based on react. The value is emited but its showing undefined on the component when im calling.
@Event() newModuleClicked: EventEmitter<any>;
handleClick(e) {
this.newModuleClicked.emit(e); //data is coming here when clicked
}
<ul class="portal-navigation__scrollable">
{this.dataNavigation.map((item) => (
<li key={item.id} onClick={() => this.handleClick(item.Name)}>
{item.Name}
</li>
))}
</ul>The component im calling its showing undefined
<navigation
[dataNavigation]="data"
(newModuleClicked)="onChange($event)"
></navigation> onChange(ev: any) {
console.log('got data', ev.target.value); //undefined
}The value you pass to .emit() will be in the detail property of the CustomEvent the Stencil component emits. So to get the actual name just rewrite your event handler to:
onChange(ev: any) {
console.log('got data', ev.detail);
}
You can also give the event a more specific type of CustomEvent<any> (the any being derived from the event declaration of EventEmitter<any>):
onChange(ev: CustomEvent<any>) {
console.log('got data', ev.detail);
}