Change color of mat-select based on mat-option

Question

So I have a dropdown:

<div class="drop-down" >    
    <mat-select>
        <mat-option *ngFor="let role of roles | keyvalue" [value]="role">
            {{role['value']}}
        </mat-option>
    </mat-select>      
</div>

Roles is an enum:

export enum Role {
    a='Software Tester (Manual)',
    b='Software Tester (Automation)',
    c='Software Tester',
    d='System Tester'
}

I would like to change the color of mat-select based on the option chosen from the dropdown menu. I think using ngClass would be a solution, but I don't really know how to use it in this case based on the enum value selected.

Answer 1

You can try ng-style

ng-style="IfCondition1 ? checkAnotherCondition && {'color':'red'} : {'color': 'green','font-weight':'bolder'}"

Answer 2

Here is a stackblitz demo of what you would like to achieve.

I used the ngClass directive and selectionChange event on mat-select to detect the option selection.