Add backcolor property to an md-chip

[bastienJS]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

a chip has a background color property. Which can be set during runtime by a hex value from the database.

What is the current behavior?

Only the selected chip`s color can be set but not the background color of an unselected chip.

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

certain items can be better seen at first sight when there are like 90 chips on a screen. Think of 3 subjects for 30 students. Biology (green), Geography (brown), etc...

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

latest version.

[m98]

In the Material design guidelines, the Chips section, there is nothing about different colors for Chips in one page, then maybe it's fine to add the feature.
But from design view, I think it's more elegant to have the same colors for Chips with the same action in one page, but doing a bit lighter change, like you might want to change the icon might be a better idea.

[bastienJS]

My user has a page with 30 md-chips each a student. They are readonly except the "x" can be clicked to detach a subject from a student. Why can each of the md-chips subject not have a different backcolor? I even know 20 year old vb classic applications which had that feature ^^

Have a look:

That way it should finally look with material design: (the chips are my custom implementation...)
Be aware that image has not the readonly implementation...

[m98]

But as you said it's a 20 years old VB application. Obviously they were not following Material design rules.

[willshowell]

@bastienJS why not just use regular old css to set the background colors?

https://plnkr.co/edit/ZAa5gKgZ0aydVnIdz35y?p=preview

[bastienJS]

@willshowell because my backcolor settings come from database, I can not put those values in a stylesheet and reference them as a css class.

[willshowell]

@bastienJS then how about ngStyle?

https://plnkr.co/edit/mA5vM1MMrrF4rdq3uoXV?p=preview

I dunno, it seems like adding an API for background color seems extraneous, especially when it's so easy to accomplish by other means.

[bastienJS]

@willshowell You are right! Either I thought it does not work as I have done once the same feature request fo ngJS material design chips and binding to backcolor was buggy or I was just confused... There should be no api change if its that easy!

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