angular2 call function of parent component

Question

I have an app where I have an upload component where I can upload a file. It is embedded in the body.component.

On upload, it should use a function (e.g. BodyComponent.thefunction()) of the parent component (do a call to update the data): but only if it the parent is specifically the body.component. The upload might also be used elsewhere with different behavior.

Something like parent(this).thefunction(), how to do that?

Answer 1

I would create a custom event in the child component. Something like this:

@Component({   selector: 'child-comp',   (...) }) export class ChildComponent {   @Output()   uploaded = new EventEmitter<string>();    uploadComplete() {     this.uploaded.emit('complete');   } 

Your parent component could register on this event

@Component({   template `     <child-comp (uploaded)="someMethod($event)"></child-comp>   `,   directives: [ ChildComponent ] }) export class ParentComponent {   (...)    someMethod(event) {   } } 

Another way would be to inject the parent component in the child one, but they will be strongly linked together...

Answer 2

Below is the code that worked for me in the latest

Angular 5+

class ChildComponent {   @Output() myEvent = new EventEmitter<string>();    callParent() {     this.myEvent.emit('eventDesc');   } } 

In ParentTemplate's template

<child-component (myEvent)="anyParentMethod($event)"