Angular2 passing a function to a directive via attribute

Question

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

Answer 1

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 :)

Answer 2

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

Answer 3

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.