How to change the background of of MatSelect using ngClass?

Question

I'm trying to change the background color of my mat-select option or the div container using ngClass in Angular 8 whenever I changed the value, followed the documentation and some samples but they only worked on list, the results which I want is not working when I try mat-select.

here'is my html code

<div class="status">  
<mat-select matTooltip="Update your progress"
            (selectionChange)="updateStatus($event,listtask)"
            [(ngModel)]="listtask.status">

  <mat-option *ngFor="let status of status" 
              [value]="status" 
              [ngClass]="
              {
                'selectbg1':status=='Not Yet Started',
                'selectbg2':status=='In Progress',
                'selectbg3':status=='Done'
              }">
  </mat-option>

</mat-select>
</div>

CSS

.selectbg1{
  background:red;
}

.selectbg2{
  background:orange;
}

.selectbg3{
  background:green;
}

TS Component

export class TasklistComponent implements OnInit {
  //status array
  status = ['Not Yet Started','Working on It','On Going','Almost There','Done'];
  selectedStatus:string;
}

Maybe duplicate https://stackoverflow.com/questions/46766597/styling-mat-select-in-angular-material — Hsuan Lee, Sep 23 '19 at 02:40
works fine for me https://stackblitz.com/edit/angular-mat-select-data-npbfgt — joyBlanks, Sep 23 '19 at 03:27

score 0 · Answer 1 · answered Sep 23 '19 at 02:10

0

You will need to target the span inside the mat option

.selectbg1 span {
  background:red;
}

.selectbg2 span {
  background:orange;
}

.selectbg3 span {
  background:green;
}

answered Sep 23 '19 at 02:10

Adrian Brand

20,384
4
39
60

How to change the background of of MatSelect using ngClass?

1 Answers1