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?
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...
Below is the code that worked for me in the latest
class ChildComponent {
@Output() myEvent = new EventEmitter<string>();
callParent() {
this.myEvent.emit('eventDesc');
}
}
In ParentTemplate's template
<child-component (myEvent)="anyParentMethod($event)"
Suppose that I have a ChildComponent and from that I want to call the method myMethod() which belongs to ParentComponent (keeping the original parent's context).
@Component({ ... })
export class ParentComponent {
get myMethodFunc() {
return this.myMethod.bind(this);
}
myMethod() {
...
}
}
<app-child [myMethod]="myMethodFunc"></app-child>
@Component({ ... })
export class ChildComponent {
@Input() myMethod: Function;
// here I can use this.myMethod() and it will call ParentComponent's myMethod()
}