Output and EventEmtiter not sending any data

I want to send data from my child component to my parent component using the Output() and EventEmitter methods. However, it appears as though nothing is being sent through, despite the function the emitter is in being hit in the child component?

My child component:

@Output() urlStringEvent = new EventEmitter<string>();

ngOnInit(): void {
    this.startUpload();
  }

startUpload() {
    // Unrelated Code Above ^^^^
    // Assign URL's to Array
    this.task.snapshotChanges().pipe(
      last(),
      switchMap(() => ref.getDownloadURL())
    ).subscribe(url => {
      this.urlStringEvent.emit(url);
    })
  }

In the above startUpload() method, the ‘url’ response is sent through, however nothing seems to happen with ‘this.urlStringEvent.emit(url);’

In my parent component (component.html):

<app-upload-task-training (showEvent)="receiveUrlString($event)"></app-upload-task-training>

component.ts:

receiveUrlString($event: any) {
    console.log($event);
  }

Nothing is logged in the $event as seen above, why could this be?

Answer

You did not properly name the event in your html. Change html code like this:

<app-upload-task-training (urlStringEvent)="receiveUrlString($event)"></app-upload-task-training>