I am sorry for my newbie question, I am trying to emit an event from a child to a parent component using an @Output
EventEmitter
. I am unable to catch 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 expected to have
done editing child
And a
done editing parent
But I only got done editing child
You need to actually have a binding to the event of the child using the (eventName)
notation:
<app-new-attachment [attachment]="newAttachment" (doneEditingAttachment)="doneEditingAttachment($event)"></app-new-attachment>