Material Select Box showing multiple selection

Question

Currently I m using material angular ui for select control. When a user select a particular option (example : Option 3), will show a confirmation pop up. if NO is selected in confirmation pop up old data (example : Option 1) should be selected in select box. Its working fine. But issue is the .mat-active class is showing for Option 3 too. How can I remove the selected highlight of Option 3?

<mat-form-field>
                  <mat-select id="select" matInput formControlName="demo" (selectionChange)="selectedOption($event)">
                      <mat-option value="op1">Option 1</mat-option>
                      <mat-option value="op2">Option 2</mat-option>
                      <mat-option value="op3">Option 3</mat-option>
                  </mat-select>
              </mat-form-field>

public selectedOption(event: MatSelectChange) {
      let selectedItem = event.source.value;
      if (selectedItem == "op3") 
        this.showConfirmation();          
      else
        this.selected = selectedItem;
     }
 //On confirmation pop up close
 dialogRef.afterClosed().subscribe(result => {
  if (result)
    this.parameters.controls.demo.setValue("op3");
  else
  {
    this.selected ? this.parameters.controls.demo.setValue(this.selected) : this.parameters.controls.demo.setValue("op1");
}});

Screen Shot of UI

Please edit your question to: clarify title of question, improve content quality, improve code formatting, include the current result, include the expected result. See How to Ask — Gander

James James · Accepted Answer · 2020-12-28T07:44:57

Use [ngClass], In selectedOption method set a flag (example : option3Selected = true;)

  <mat-option value="op3" [ngClass]="{'option3-not-selected': option3Selected === false,'option3-selected':option3Selected === true}">Option 3</mat-option>
    
      .option3-not-selected
      {
        background-color: white; // TO REMOVE COLOR, You can set any color.
      }
    
      .option3-selected
      {
        background-color: Green;  // TO SET COLOR, You can set any color.
      }

Material Select Box showing multiple selection

1 Answers