I'm trying to bind a function in a parent component into a property on a child component.
This is what I have
@Component({
selector: 'awesome',
templateUrl: 'awesome.html'
})
export class AwesomeComponent {
@Input() callback: Function;
ngOnInit() {
this.callback();//Error, this.callback is not a function, but contains a string value on the fuction call
}
}
This is how i'm using it
<awesome callback="nameOfFuncFromAnotherComponent"></awesome>
but it doesn't seem to work
Your code only binds the string nameOfFuncFromAnotherComponent to the callback attribute (and property if it exists). Angular doesn't interpret the value at all.
To make Angular manage the binding use
<awesome [callback]="nameOfFuncFromAnotherComponent"></awesome>
With this syntax Angular also evaluates the value
<awesome callback="{{nameOfFuncFromAnotherComponent}}"></awesome>
but converts the result to a string (calls .toString()) before the assignment.
Thanks to @MarkRajcok for clarification :)
awesome has a callback input property declared, callback="nameOfFuncFromAnotherComponent" will bind the string nameOfFuncFromAnotherComponent to the callback property of the component (not the attribute). This is some sort of Angular shortcut/special syntax for constants (that I don't like).callback="{{nameOfFuncFromAnotherComponent}}" won't work because it essentially calls nameOfFuncFromAnotherComponent.toString() and assigns that to the callback property. {{}} binding always assigns a string result.
i think using eventEmitter in the case of function is much more better becouse of the passing the function by reference will make some problems with the this
so my suggestion is to do the following
cm1.component.html
<cm2-component (childFunc)="myFunc()"></cm2-component>
cm2.component.ts
import { Output, EventEmitter } from '@angular/core';
export class Cm2 {
@Output('childFunc') childFunc: EventEmitter<any> = new EventEmitter();
constructor() { }
invokeMyFunc(){
this.childFunc.emit()
}
}
There is really no need for pushing callback into @Input property. You can use #local_variable wich provides a reference to the child component. That way you will have access to all its properties and methods from the parent template. See ng2 documentation on component interaction.
For me this solution worked:
<cm2-component [childFunc]="myFunc.bind(this)"></cm2-component>`
import { Output, EventEmitter } from '@angular/core';
export class Cm2 {
@Input('childFunc') childFunc: Function;
constructor() { }
invokeMyFunc(){
this.childFunc()
}
}
