angular / angular/components

Feature: Possibility to make the [displayWith] of Autocomplete more flexible

Open
#4,863 31 comments 43 reactions 0 assignees View on GitHub
area: material/autocomplete feature needs: discussion P3
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.