CODEWITHSUNDEEP
angularcolorsmd-chip
Sephen
Sephen

Reputation: 1111

Angular 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:enter image description here

Does anybody know how to fix this?

Thanks in advance!

Upvotes: 13

Views: 8119

Answers (3)

Kriti
Kriti

Reputation: 2393

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>

Upvotes: 7

Mike Axle
Mike Axle

Reputation: 1097

Right now (24 Sep 2017), this is not working. Even on the example in the docs isn't working

enter image description here

I was forced to use a CSS property:

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

Upvotes: 3

Riron
Riron

Reputation: 1023

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>

Upvotes: 29

Related Questions