CODEWITHSUNDEEP
angularangular-material
integral100x
integral100x

Reputation: 342

How can I highlight a mat-radio-button row?

EDIT: https://stackblitz.com/edit/angular-uhuwie

I'm having difficulty highlighting a particular row of mat-radio-button. It seems to be highlighting all the rows when the correct choice is selected. If the selected row matches the correct answer, only that row should be highlighted green, otherwise highlight red. I also need to show one question per page and move the explanation to where the question is when the answer is shown. My code is below:

<div *ngFor="let option of question.options">
  <div class="form-group">
    <mat-radio-group class="form-control" formControlName="answer" name="answer" (change)="radioChange($event)">
      <div [style.backgroundColor]="selectedRadioOption === question.correctAnswer ? '#00c853': 'ff0000'">
        <mat-radio-button color="primary" name="radio-group" [value]="option.optionValue" (click)="validate(answer)">
          <label>{{ option.optionText }}</label>
        </mat-radio-button>
      </div>
    </mat-radio-group>
  </div>
</div>

Upvotes: 0

Views: 937

Answers (1)

Andrew Allen
Andrew Allen

Reputation: 8002

You need to check if the option is the same as the selected option also.

<div *ngFor="let option of question.options">
  <div class="form-group">
    <mat-radio-group class="form-control" formControlName="answer" name="answer" (change)="radioChange($event)">
      <div 
        [style.backgroundColor]=
            "selectedRadioOption === question.correctAnswer &&
             selectedRadioOption === option.optionValue
             ? '#00c853': 'ff0000'">
        <mat-radio-button color="primary" name="radio-group" [value]="option.optionValue" (click)="validate(answer)">
          <label>{{ option.optionText }}</label>
        </mat-radio-button>
      </div>
    </mat-radio-group>
  </div>
</div>

Upvotes: 1

Related Questions