0
273
ViewsAngular 2 Material md-chips color attribute not working
When i try to style my md-chips with the color attribute nothing happens. According to the guide https://material.angular.io/components/component/chips this has to work. All my other elements style without problems.
<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:
Does anybody know how to fix this?
Thanks in advance!
·
Santiago Trujillo
3 answers
Answer question0
According to the plunkr example, the chips are only colored when the selected attribute is set to true :
<md-chip color="accent" selected="true">Chicken</md-chip>
·
Santiago Trujillo
Report
0
You can set the md-chip color dynamically by using ngStyle
<md-chip-list>
<md-chip *ngFor="let item of itemList" [ngStyle]="{ backgroundColor: item.color }">
{{ item.name }}
</md-chip>
</md-chip-list>
·
Santiago Trujillo
Report
0
Right now (24 Sep 2017), this is not working. Even on the example in the docs isn't working
I was forced to use a CSS property:
<md-chip color="primary" [selected]="true" style="background-color: #986f37">Content here</md-chip>
·
Santiago Trujillo
Report
Answer question