My problem is the following: I have a typeahead component that gets its dropdown options from a method of an injected service i want to pass. I could just instance the service in the typeahead component and get the data there but in that case my component wouldn't be able to receive any kind of service method from any service. So what i want to do is this:
Parent:
<app-typeahead [typeaheadService]="myservice.getFunction"></app-typeahead>
Child:
@Input() public typeaheadService: (string) => (Observable<any[]>);
But then when i try to run it i get "this.get is not a function" so my guess is that i am losing the parent scope, i have already tried passing it as [typeaheadService]="myservice.getFunction.bind(this)" but it doesn't work either.
Please don't suggest emitting an event on keyup and then passing the result to the children by param because i want to do stuff after i got the results from subscription or if the results are empty and i can only do that if i handle the results from the children.
Thanks.
You actually want the service function to be binded to the service:
[typeaheadService]="myservice.getFunction.bind(myservice)"
Also, consider saving the binded function in a variable in your component otherwise angular will create a new function on each change detection cycle and update your typeaheadService input.
template:
[typeaheadService]="typeaheadCallback"
and component:
public readonly typeaheadCallback = myservice.getFunction.bind(myservice);