how to create customize textchanged event in aurelia

Question

textchanged event Consumer should pass event and not in control.Consumer will excute their code on textchange event. Component will just expose that event. ??? this is requirement how can I create in aurelia?

component

textbox.html

<input type="text" class="form-control change.delegate="inputValueChange()">

textbox.ts

constructor() {

  }

  attached() {
    this.controller.validateTrigger = validateTrigger.changeOrBlur;
    this.controller.addRenderer(new BootstrapFormRenderer());
    this.controller.validate();
   } 

    public inputValueChange(newValue,oldValue){
      console.log(newValue)
      }
    }

app.html

<template>
<textbox  maxlength="10" autocomplete="on"></textbox>
<template>

Answer 1

You can use custom events - in your textbox component add this to the constructor:

constructor(private element: Element) {}

and in the inputValueChange add something like this:

let event = new CustomEvent('textchange', { 
        detail: <some-data-you-want-to-send>,
        bubbles: true
    });

this.element.dispatchEvent(event);

You should then be able to use the new textchange event like this:

<textbox  maxlength="10" autocomplete="on" textchange.delegate="someFunction()"></textbox>

PS. in your example you are missing a " after the form-control / before change,delegate, that will probably prevent the inputValueChange from being called at all now