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?
You are emitting urlStringEvent but in html you using showEvent, It will not work either you can change your html like this
<app-upload-task-training (urlStringEvent)="receiveUrlString($event)"></app-upload-task-training>
OR
Change this
@Output() urlStringEvent = new EventEmitter<string>();
to this
@Output('showEvent') urlStringEvent = new EventEmitter<string>();
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>