Angular EventEmitter not emitting?

Question

I think I'm misunderstanding the concept of the EventEmitter.

I'm trying to call a function on a custom component when a focusout event has occurred. Here is my custom-form.component.html:

    <div class="flex flex-col">
        <app-input-form 
        [label]="'Some content'"
        [inputName]="'myCustomInput'"
        ...
        (focusOutEvent)="test($event)"
        ></app-input-form>
    </div>

I added the test function is my custom-form.component.ts like this:

  test(e: any){
    console.log('test');
  }

Finally, in my input-form.component.ts (relates to app-input-form), I added my HostListener and my Output like this:

  @Output()
  focusOutEvent = new EventEmitter<any>();

  @HostListener('focusout', ['$event']) myFocusOutFunction(){
    console.log('myFocusOutFunction is triggered')
    this.focusOutEvent.emit();
  }

This function is triggered when I'm losing focus, but then the test function is never called.

Why isn't it working? focusOutEvent is an output, and myFocusOutFunction where there is the focusOutEvent.emit() works fine, so what am I missing? Thanks for your help

Answer 1

You could try to use directly the built-in focusout event in your input-form.component.html

input-form.component.html

<input (focusout)="this.focusOutEvent.emit()">
...

input-form.component.ts

@Output()
focusOutEvent = new EventEmitter<any>();

custom-form.component.html

 <div class="flex flex-col">
    <app-input-form 
    [label]="'Some content'"
    [inputName]="'myCustomInput'"
    ...
    (focusOutEvent)="test()"
    ></app-input-form>
</div>