Hi there.
I’ve build a custom StencilJS component that fires a custom DOM event (see below). FYI: The ‘on’ part is added bij StencilJS itself.
@Event() searchEvent: EventEmitter<string>;
But when I want to bind to that event it doesn’t work. See my HTML and viewmodel.
// Html
<my-component ref="myComponent" search-event.trigger="handleSearch($event)">
// View model
export class App {
private myComponent: StencilJS.MyComponent;
private attached(): void {
// This works. So I know that the event is triggered properly.
this.myComponent.addEventListener('searchEvent', (ev: CustomEvent<string>) => this.handleSearch(ev));
}
private handleSearch(event: CustomEvent<string>): void {
// The event handler. This is not triggered via the 'search-event.trigger' binding.
}
}
But when I change the event name on my StencilJS component to the following
@Event() searchevent: EventEmitter<string>;
and my html to
<my-component ref="myComponent" searchevent.trigger="handleSearch($event)">
the binding works fine! Is there something I am missing? Can’t aurelia handle the hyphen in the DOM event name when binding?
Any help is appreciated.