Feature: Possibility to make the [displayWith] of Autocomplete more flexible
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### Bug, feature request, or proposal:
Feature Request.
#### What is the expected behavior?
I expect `[displayWith]` to give me back the whole `object` so I can treat what property I can return to `display` (doesn't it make sense)?
#### What is the current behavior?
Actually `[displayWith]` is too limited.
Ex:
I have the following variable that gets the content from API:
```
this.myObs = this..();
```
That's the content coming from back-end:
```
[
{ id: 1, name: 'anyName' },
{ id: 2, name: 'xxx' }
];
```
In template I have:
```
{{ obj.name }}
```
Since, I'm binding the md-option to `id`, `[displayWith]` just gives me the value of `id` while I was expecting at least the `full object` so I can return the `name`, for example.
**Workarounds:**
1- Subscribe to the observables and store in arrays.
**Problem 1:** You'll have to loop through the array **everytime** that an option is selected to return the desired property.
**Problem 2:** Imagine that I have more than 10 autocomplete (my case), I'll have to create 10 variables and subscribe them all while I could simply use the `async` pipe (as I'm doing) and, consequently I wouldn't need to subscribe in nothing.
2 - Bind the full object to ``, so `[displayWith]` will give me back the whole object.
**Problem:** If your API expects a single property (in my case back-end expects only the id), before submits the form, you'll have to change **the whole** content of form that was stored as object to id.
#### What are the steps to reproduce?
Providing a Plunker (or similar) is the *best* way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U
#### What is the use-case or motivation for changing an existing behavior?
-
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Material 2.0.0-beta.6
#### Is there anything else we should know?
The workarounds can be used? Ofc they can, however it'd be really better if Material2 could provide a better solution for this.
Contributor guide
Research direction
Start by reviewing the Angular Material autocomplete behavior around displayWith and md-option values. Reproduce the example using an async option list, an id-valued option, and a display function. Done means the requested object-aware display behavior is defined and verified without requiring manual subscriptions or replacing the form value before submission.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100