Within a loop, I have a radio button in a mat radio group where the button and card should change color based on the selected index. However, as shown in the screenshot, the radio button is selected but not displaying in white.
https://i.sstatic.net/epcPy.png
The desired appearance of the radio button based on the selected index or selected radio should be like this, but my current logic is not functioning properly. Any assistance would be greatly appreciated.
https://i.sstatic.net/HRKAK.png
Anyone have any suggestions? Thank you.
#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;
}