[SOLVED] Angular component: How can I force an output to be handled by parent component?

Angular component: How can I force an output to be handled by parent component?

I have a child component FileUploadComponent that can be used by multiple parent component. The FileUploadComponent has an output that I want to ensure it's handled by ALL parent components.

How can I throw an exception, from the FileUploadComponent, if the output is not handled by one of the parent ?

What I mean by "handled by the parent":

<app-file-upload #campaignFiles
    ...
    (documentsLoaded)="onDocumentsLoaded($event)">
</app-file-upload>

Thanks for your help.

Solution

You can check the observed property of the EventEmitter:

ngAfterViewInit() {
  if (this.myOutput.observed) {
// we are fine
  } else {
// we have a problem
  }
}

(Or alternatively this.myOutput.observed.length, but it's deprecated. Depends on the version of RxJS).

Here's a stackblitz: https://stackblitz.com/edit/angular-mtkweq?file=src%2Fapp%2Fhello.component.ts