Feature request: custom view value for select and autocomplete

[xuanshenbo]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Select and Autocomplete allow custom view values, for example:
https://material.io/guidelines/components/menus.html#menus-usage

This Menu allows icons in addition to text.
I understand the example is a Menu not Select or Autocomplete, but they are under the same category in Material Design

What is the current behavior?

The values are limited to strings, and doesn't allow custom layout inside the Select and Autocomplete dropdown.

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

As per the example screenshot.

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

Material 2.0.0-beta.6

[julianobrasil]

Have you try something like:

<div>
    text to the left
    <div style="float: right">text to the right</div>
</div>

In the autocomplete md-option? It works with text. Maybe it works with icons too (material icons or font awesome).

[julianobrasil]

Take a look at this plunker: https://plnkr.co/edit/v3EoZp?p=preview

[xuanshenbo]

@julianobrasil that looks great thanks!

However I accidentally noticed that your code doesn't work on Firefox 53.0.3

Can you raise a bug for that?

Thanks!

[julianobrasil]

I think it's an issue with nested divs in Firefox. I modified the plunker. This will work both in Chrome, Firefox, Edge and IE:

<div>
      <div style="float: left;">{{ state }}</div>
      <div style="float: right;">
            <i class="material-icons" style="font-size: 15px">add_location</i>
            {{state}}
      </div>  
</div>

[jelbourn]

Closing this since I believe it's doable today (it would just be your mat-option template). Free free to open another issue if that's not the case.

[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.}