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.

Answer 1

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.

Answer 2

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

Answer 3

Try it this way:

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

And remove:

outputs: ['fileUploaded']

Check documentation here! :D

Answer 4

You should not create child component use new operator.

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

Answer 5

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