Angular custom mat chip color

user_15682389 0
Viewed 839

Is there any way to make the mat chip to have 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.

angular
2 Answers

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>
user_110382450

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>
user_159334100
Related