Angular custom mat chip color

Question

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.

Answer 1

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>