Apologies for my inexperienced inquiry, I am attempting to trigger an event from a child component to a parent component using an @Output and EventEmitter. However, I am facing difficulties in capturing the event in my parent component.
Child Component
@Component({
selector: 'app-new-attachment',
templateUrl: './new-attachment.component.html',
styleUrls: ['./new-attachment.component.css']
})
class NewAttachmentComponent {
@Input('attachment') attachment: any;
@Output() doneEditingAttachment:EventEmitter<boolean> = new EventEmitter<boolean>();
submit() {
console.log('done editing child');
this.doneEditingAttachment.emit(true);
}
}
Parent Component
@Component({
selector: 'app-new-article',
templateUrl: './new-article.component.html',
styleUrls: ['./new-article.component.css']
})
class NewArticleComponent {
newAttachment: any = {};
doneEditingAttachment($event) {
console.log('done editing parent ', $event);
}
}
I was anticipating to see
done editing child
As well as
done editing parent
However, only done editing child was displayed.