Unable to catch event emitted from child component in Angular 4

211
August 08, 2017, at 9:09 PM

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

Answer 1

You need to actually have a binding to the event of the child using the (eventName) notation:

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

Based on the commnet you need this,

<app-new-attachment [attachment]="newAttachment" (doneEditingAttachment)="submit()"></app-new-attachment>
READ ALSO
Delete one targeted child and create targeted undo for that container functions in jquery

Delete one targeted child and create targeted undo for that container functions in jquery

I'm having trouble wrapping my head around this logic: I am succeeding in deleteRecipe to remove it's parents, but it is also supposed to fade in the undo button on top of it, that when clicked is supposed to fadeIn our sibling deleted RecipeAttached...

209
Highcharts, set legend height dynamically

Highcharts, set legend height dynamically

I would like to set the height of the legend dynamically, so when the container gets resized, the legend height will be adjusted automaticallyIdeally, the height of the legend should be half of the height of the charts container

324
Axios.get returning 404

Axios.get returning 404

I am so frustrated that I am resorting to the community to help me out on this issue

248
dojo validation tooltip alignment issue

dojo validation tooltip alignment issue

Dojo textbox validation tooltip alignment issue

196