I’m having trouble with an EventEmitter in my Angular project. I have two components: absence-orders and action-box

Problem: The handleAddDoc method in the absence-orders component is not triggered when the addDocumentEvent is emitted. Other event emitters work fine.

Console Output:

“uploaddocs works” is logged, so I know the uploaddocs function is being called.

Maybe I’m missing a very little dumb detail. Any suggestions on what might be going wrong?

<!-- absence-orders.component.html -->
<app-action-box 
  (addDocumentEvent)="handleAddDoc()" 
  (cancelEvent)="cancel(item?.id)" 
  (editEvent)="edit(item)">
</app-action-box>

// absence-orders.component.ts

  handleAddDoc() {
    console.log("handleAddDoc works");
  }

  cancel(itemId: string) {
    console.log("cancel works");
  }

  edit(item: any) {
    console.log("edit works");
  }






// action-box.component.ts
  @Output() editEvent: EventEmitter<any> = new EventEmitter();
  @Output() cancelEvent: EventEmitter<any> = new EventEmitter();
  @Output() approveEvent: EventEmitter<any> = new EventEmitter();
  @Output() returnEvent: EventEmitter<any> = new EventEmitter();
  @Output() rejectEvent: EventEmitter<any> = new EventEmitter();
  @Output() detailEvent: EventEmitter<any> = new EventEmitter();
  @Output() addDocumentEvent: EventEmitter<any> = new EventEmitter();

  uploaddocs() {
    console.log("uploaddocs works");
    this.addDocumentEvent.emit();
  }



<!-- action-box.component.html -->
            <li (click)="uploaddocs()">
                <app-icon-node-plus class="icon icon--xs"></app-icon-node-plus>
                add document
            </li>