Components: AUTOCOMPLETE DISPLAYWITH FUNCTION

[arat3091]

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.

I cannot use the arrow function as TSLINT complains and also somehow i see the whole function inside.

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.

[skyfremen]

I have the same issue. Followed the recommendation given by #3308 to wrap it in an arrow function however as commented by @arat3091 - "It is showing the function on the input box."

Attached is the plunker
https://plnkr.co/edit/9uwUwd97diGzeDIpAeHg?p=preview

[mxii]

You can do it like this:

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn.bind(this)">

displayFn(val) {
   return this.outsideVariable + val;
}

modified plunker: https://plnkr.co/edit/DU7Yj8QfeCK2UDabbmwl?p=preview

OR if you want to use the arrow syntax:

<md-autocomplete #auto="mdAutocomplete" [displayWith]="getDisplayFn()">

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

displayFn(val) {
   return this.outsideVariable + val;
}

modified plunker: https://plnkr.co/edit/R3FtDnCLcFu3I5mJCadj?p=preview

[skyfremen]

Thank you @mxii displayFn.bind(this) works

[M-a-c]

@arat3091 I think you can close / resolve your own issues, just so you can save the material guys some time, there are a ton of these to look through

[angular-automatic-lock-bot[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._}