I have a radio button in a mat radio group coming from a loop , the button and card should be colored based on the selected index, but as you can see on the screenshot the radio button is selected but not colored in white

The radio button based on the selected index or selected radio should be like this but currently my logic does not work. Thanks for any help.

Any idea guys ? Thanks.

#html code

<p fxLayoutAlign="center" class="select-date-time-text">Select Available Date</p>
                <mat-radio-group>
                  <mat-card style="cursor: pointer;" [ngClass]="selectedIndex === i ? 'selected-schedule-card' : ''" *ngFor="let item of schedules;let i = index;" fxLayoutAlign="start center" style="cursor: pointer;margin-bottom: 20px;">
                    <mat-radio-button  color="accent"   [ngClass]="selectedIndex === i ? 'selected-schedule-radio' : ''"   value="i"  (click)="onSelect(item , i)">
                        <mat-icon class="date-icon" style="margin-top:3px;margin-left:10px;">today</mat-icon> {{item.proposedDateStartString}}
                      </mat-radio-button>
                  </mat-card>
              </mat-radio-group>

#tscode

    onSelect(item:any , index:number) {
    this.selectedIndex = index;
    this.selectedItem = item;
  }

#css

.selected-schedule-radio {
    color: #ffffff;
  }
  
  .selected-schedule-card {
    background-color: #007DFF;
}