Angular 4 - Calling a parent method from a child component not working

Question

All of my event emitters are working properly except for one.

child.ts:

@Component({
    ... 
    outputs: ['fileUploaded']
    })

export class childComponent implements OnInit {
  ...
  fileUploaded = new EventEmitter<boolean>();
  ...
  randomMethod(){
     ...
     this.fileUploaded.emit(true);
  }

}

randomMethod() is called from the parent component as I'll show in parent.ts. It is not called in child.html.

parent.html

...
<child (fileUploaded)="onSubmit($event)"></child>
..

parent.ts

export class parentComponent {
   ...
   theChild = new childComponent;
   submitted = false;
   ...
   onSubmit(event: boolean) { 
     console.log('in onSubmit()');
     this.submitted = event;
  }

  functionCallsChild(){
     this.theChild.randomMethod();
     ...
     this.theChild = new childComponent;
  }
}

My app never logs "in onSubmit()" so why isn't this method being called? I also tried to not create a new child object on my last line but that didn't make a difference.

try to use @Output decorator, see more : http://learnangular2.com/outputs/ — Raed Khalaf, Jul 11 '17 at 13:47

score 11 · Answer 1 · answered Jul 11 '17 at 14:10

11

Maybe I haven't clear why you choose this approach or what you need it for, but as far as I know, you're supposed to use the EventEmitter from the child up to its parent. That means the the event which fires the .emit() shold be placed in the child.html. Try do do like this and it should work:

child.html

<div (click-or-whatever-fires-what-you-want)="randomMethod()"></div>

child.ts:

@Component({
    ... 
    })

export class childComponent implements OnInit {
  ...
  @Output() fileUploaded = new EventEmitter<boolean>();
  ...
  randomMethod(){
     ...
     this.fileUploaded.emit(true);
  }

}

parent.html

...
<child (fileUploaded)="onSubmit($event)"></child>
..

parent.ts

export class parentComponent {
   ...
   submitted = false;
   ...
   onSubmit(event: boolean) { 
     console.log('in onSubmit()');
     this.submitted = event;
  }
}

Hope it was helpful.

answered Jul 11 '17 at 14:10

kamakatekki

143
5

Calling randomMethod() from child.html does not make sense with my application. It needs to get fired in randomMethod() which also needs to be called form the parent component – Hiding Jul 11 '17 at 14:16
Ok, that was the _"I haven't clear why you choose this approach"_ part. ;) Mmh...I don' know, it looks like you're trying to: fire a child method from the parent, then the method in the child does something and trigger the emit. The parent catches the child event-emitted and fires its event on its own. Is it right? If it is, isn't it better to set up a service instead? – kamakatekki Jul 11 '17 at 14:27
Thanks +1 it was great help – Eldho Nov 21 '17 at 13:42

score 1 · Answer 2 · answered Mar 08 '18 at 06:32

You can call the method of parent component from the child component by using the @Output emitter which fires on any event on child component. i have used this approach on commenting section to update the count in parent component using method of child component.

Parent.ts

/** Update the count from child component */
UpdateCount(id) {
this.getTotalCommentCountByGroupId(id);
}

Parent.HTML

 <srv-group-feed [LiveFeedInput]="groupPostRes" 
 (CommentCount)="UpdateCount($event)"></srv-group-feed>

Child.ts

 this.CommentCount.emit(data you need to pass);

and globally you can declare @Output event in the child component i.e child.ts

@Output() CommentCount = new EventEmitter<string>();

score 0 · Answer 3 · answered Jul 11 '17 at 13:50

0

Try it this way:

@Output()
  fileUploaded = new EventEmitter<boolean>();

And remove:

outputs: ['fileUploaded']

Check documentation here! :D

answered Jul 11 '17 at 13:50

SrAxi

19,787
11
46
65

Thanks, unfortunately no luck. It must have something to do with me creating the child object in the parent component and then expecting something back to the parent that called it? Maybe not emitting event in child html? Those are the only differences between this and my other event emitters. – Hiding Jul 11 '17 at 13:56
@Hiding Can't you instance the child component with a selector instead of using `theChild = new childComponent;`? – SrAxi Jul 11 '17 at 14:00

score 0 · Answer 4 · edited Jul 11 '17 at 15:00

0

You should not create child component use new operator.

You should use @ViewChild() to reference child component.

edited Jul 11 '17 at 15:00

msanford

11,803
11
66
93

answered Jul 11 '17 at 13:59

jackjoy

101
1
2

score -1 · Accepted Answer · answered Jul 11 '17 at 14:16

Your selection of the child component is wrong, you should be using ViewChild like this:

parent.html:

<child #theChild (fileUploaded)="onSubmit($event)"></child>

parent.ts:

export class parentComponent {
   ...
   @ViewChild('theChild') theChild;
   submitted = false;
   ...
   onSubmit(event: boolean) { 
     console.log('in onSubmit()');
     this.submitted = event;
  }

  functionCallsChild(){
     this.theChild.randomMethod();
     ...
  }
}

Angular 4 - Calling a parent method from a child component not working

5 Answers5