I am sorry for my newbie question, I am trying to emit an event from a child to a parent ponent using an @Output EventEmitter. I am unable to catch the event in my parent ponent.

Child Component

@Component({
  selector: 'app-new-attachment',
  templateUrl: './new-attachmentponent.html',
  styleUrls: ['./new-attachmentponent.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-articleponent.html',
  styleUrls: ['./new-articleponent.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

I am sorry for my newbie question, I am trying to emit an event from a child to a parent ponent using an @Output EventEmitter. I am unable to catch the event in my parent ponent.

Child Component

@Component({
  selector: 'app-new-attachment',
  templateUrl: './new-attachment.ponent.html',
  styleUrls: ['./new-attachment.ponent.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.ponent.html',
  styleUrls: ['./new-article.ponent.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

• javascript
• angular
• typescript
• angular2-ponents

Share Follow asked Aug 8, 2017 at 13:03 jemlifathijemlifathi 1,60255 gold badges2323 silver badges3333 bronze badges 2

• 1 how does the html look like? – Sajeetharan Commented Aug 8, 2017 at 13:03
• @Sajeetharan <app-new-attachment [hidden]="!toggleNewAttachment" [attachment]="newAttachment"></app-new-attachment> I already figured it out: I forgot to add the event in the child html – jemlifathi Commented Aug 8, 2017 at 13:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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>

Based on the mnet you need this,

<app-new-attachment [attachment]="newAttachment" (doneEditingAttachment)="submit()"></app-new-attachment>