CODEWITHSUNDEEP
angular
andyiscoding
andyiscoding

Reputation: 43

Angular custom mat chip color

Is there any way to make the mat chip to have a custom color other than the primary, accent, warn and default? This is my code now:

<mat-chip *ngIf="status.name==='open'" color="warn" selected trans>{{status.display_name}}</mat-chip>
<mat-chip *ngIf="status.name==='pending'" color="accent" selected trans>{{status.display_name}}</mat-chip>
<mat-chip *ngIf="status.name==='assigned'" color="primary" selected trans>{{status.display_name}}</mat-chip>
<mat-chip *ngIf="status.name==='verification'" color="yellow" selected trans>{{status.display_name}}</mat-chip>

And yeah it's pretty obvious I want the last mat-chip to have a yellow color to it. The color='primary' is black now and I want to change it to be green but I have no idea how to. Any help would be appreciated.

Upvotes: 3

Views: 18735

Answers (2)

Jmaus
Jmaus

Reputation: 41

I found another solution for your problem. I'm using Angular 13, and with [ngStyle] you can change the value of a CSS property, even you can insert a value from your TS file component. I know this is not correct, because the CSS code should be written in a style file, but sometimes if we do an exception the problem can be solved. I hope this can help someone, maybe there's a better solution, but it work for me.

<mat-chip *ngFor="let tag of tags" [ngStyle]="{'background-color': colorTags[tag]}">
  {{tag}}
</mat-chip>

Upvotes: 4

KEVAL PANCHAL
KEVAL PANCHAL

Reputation: 545

You need to add CSS class instead of color="primary" Create you own CSS class

.assigned-chip{
     background-color: <<color code>> // as per your requirement
}

<mat-chip *ngIf="status.name==='assigned'" class="assigned-chip">{{status.display_name}}</mat-chip>

Upvotes: 6

Related Questions