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.

Solution 1

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();
     ...
  }
}

Solution 2

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.

Solution 3

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>();

Comments

[Raed Khalaf]

try to use @Output decorator, see more : learnangular2.com/outputs

[Hiding]

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.

[SrAxi]

@Hiding Can't you instance the child component with a selector instead of using theChild = new childComponent;?

[Hiding]

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

[kamakatekki]

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?

[Eldho]

Thanks +1 it was great help