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

Question

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>

Answer 1

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>