Input not triggering change event

Question

I have the following input

<input
  id="{{options.elementId}}"
  #awesomplete
  class="c-awesomplete__input dropdown-input"
  [formControl]="control"
  [type]="customType"
  [label]="options.label"
  (click)="toggleDropdown()"
  (change)="changed($event)">

Which uses the awesomplete jquery plugin. And when I'm selecting or writing a value, it is not triggering the changed event. And I have no idea why, unless I click outside of the input component. If I click outside the input, it will trigger the change. But I would like for it to trigger once I select a value from a dropdown or I write something.

  @ViewChild("awesomplete", {static: false}) public awesompleteRef: ElementRef;
  @Input() public control: FormControl;
  @Input() public options: IAwesompleteOptions;

  public awesomplete: Awesomplete;

  constructor() { }

  ngOnInit() {
    this.control.enable();
  }

  ngAfterViewInit() {
    this.awesomplete = new Awesomplete(this.awesompleteRef.nativeElement, this.options);

  }

  public toggleDropdown(): void {
    this.awesomplete.evaluate();
    this.awesomplete.open();
  }

  public clearText(): void {
    this.control.setValue("");
  }

  public changed($event): void {
    console.log("I've changed");
  }

Answer 1

To trigger the "change" event, the element needs to lose focus thus why it works when you click elsewhere.

In order to do what you wish, you need to attach a new event listener to your component.

Here is the list of events available for that plugin: https://leaverou.github.io/awesomplete/#events

From what I can read, you need to listen to the awesomplete-select or awesomplete-selectcomplete events.

Here's an example from that page:

Awesomplete.$('.your-element').addEventListener("awesomplete-selectcomplete", function() {
    // Do something
});