Clever Geek Handbook

Angular 2 md-chips color attribute material not working

When I try to create my md tokens with a color attribute, nothing happens. According to the tutorial https://material.angular.io/components/component/chips this should work. All my other styling elements are no problem.

<md-chip-list>
    <md-chip color="primary"> Chicken </md-chip>
    <md-chip color="warn"> Table </md-chip>
    <md-chip color="accent"> Tree </md-chip>
    <md-chip> Eight </md-chip>
</md-chip-list>

Result: enter image description here

Does anyone know how to fix this?

Thanks in advance!

+3


source to share


3 answers


As per the plunkr example , the chips are colored only when the attribute is selected

set to true

:



<md-chip color="accent" selected="true">Chicken</md-chip>
+6


source


The md-chip speaker can be configured dynamically using ngStyle



<md-chip-list>
 <md-chip *ngFor="let item of itemList" [ngStyle]="{ backgroundColor: item.color }">
{{ item.name }}
</md-chip>
</md-chip-list>
+2


source


Right now (September 24, 2017) it doesn't work. Even the example in the docs doesn't work

enter image description here

I was forced to use the CSS property:

<md-chip color="primary" [selected]="true" style="background-color: #986f37">Content here</md-chip>
+1


source






More articles:


All Articles