Autocomplete displayWith function scope

[julianobrasil]

Bug, feature request, or proposal:

The function used in displayWith can't access properties of the host component. I'm not sure if this is a mistake or it is a design choice.

What is the expected behavior?

It could access properties in the scope of the host component

What is the current behavior?

Same as the first answer.

What are the steps to reproduce?

Just create a public/private property in the host component class and try to access it.
Here is the plunker (the material.angular.io Autocomplete example modified)
https://plnkr.co/edit/2EgoBdPDohzFa1DYoU2P?p=preview

What is the use-case or motivation for changing an existing behavior?

I was trying to reuse a single autocomplete in two different situations, selected by the user choice in a radio-button-group. Than I used ngModel to get the user's choice and setup the autocomplete according to it. But, depending on the user's choice, the autocomplete works with very different objects and should display very different information when one option is selected from the list.

Which versions of Angular, Material, OS, browsers are affected?

@angular/cli: 1.0.0-rc.0
node: 6.9.5
os: win32 x64
@angular/cli: 1.0.0-rc.0
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/compiler-cli: 2.4.8

Is there anything else we should know?

I can easily replace the one autocomplete by two of them, no problem. Just wanted to report this.

[kara]

@julianobrasil If you want to bring along context, you can wrap it in an arrow function. Example:

displayFn(val) {
   return (val) => this.someProperty + val;
}

Or you can use a getter:

get displayFn(val) {
   return (val) => this.someProperty + val;
}

[julianobrasil]

Thanks, @kara.

[arat3091]

For me this does not work because of two reasons.

1. Tslint is complaining that vale is shodowing the variable.
2. It is showing the function on the input box.

[bharathmuppa]

I want to add a emit event in call back and return just a value
return (val) => {this.someFunction.emit(obj);return this.someProperty + val;}
above statement is resulting in emit of undefined error

[julianobrasil]

@arat3091, maybe a little late, but you have to remove the parameter in displayFn (probably a typo in @kara's answer):

get displayFn() {
   return (val) => this.someProperty + val;
}

[VikramVasudevan]

saved my day ! thanks @julianobrasil

[aircliff01]

In case anyone is looking for a response with return types:

get displayFn(): (option?: string) => string | undefined {
    return (option?: any): string | undefined => {
       // put code here
    }
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}