Change color of selected radio button in a ngFor loop

Question

I would like to change something (background-color, text color, highlight, etc.) on the item selected in my list of radio buttons when clicked/selected. The list is from an ngFor loop of items, which I think is why nothing is working. What I have now does change color, from red to blue, on click, but it changes all the items in the list, not the single item selected.

I've tried using li::selection in CSS, but that did not work.

 <div class="container">
<div class="col-sm-12 form-group">
    <p> <strong> Select Your Subject</strong></p> 
    <ng-container *ngFor="let subs of allSubjects">
      <ul id="subList">
        <li [ngClass]="{'blue' : toggle, 'red': !toggle}">
 <label>
<input checked type="radio" name="ClassTimesSubjects" 
 [(ngModel)]="subs.classTimeSubjectsName"
[value]="subs.classTimeSubjectsName" 
[(ngModel)]="ClassTimesSubjects" #ClassSubjects="ngModel" required
(click)="enableDisableRule()">
   {{ subs.classTimeSubjectsName }}
   <img [src]="subs.classTimeSubjectsImage" id="subPics">
   </label>         
        </li>
      </ul>
    </ng-container>
  </div>
  </div>

Typescript...

   toggle = true;
   status = "Enable";
   public allSubjects: Array<any>;

   enableDisableRule(job) {
      this.toggle = !this.toggle;
      this.status = this.toggle ? "Enable" : "Disable";
   }

CSS...

 .blue {
background-color: blue;
   }

 .red {
background-color: red;
   }

Answer 1

You should be using something as this

<ul>
  <li *ngFor="let item of data" [ngClass]="{'blue' : selectedValue==item.id, 'red': selectedValue!=item.id}" >
    <input type="radio"  name="group" [(ngModel)]="selectedValue" [value]="item.id"/> {{item.name}}</li>
</ul>

Typescript

selectedValue=1
  data = [
    { id: 1, name: 'A', selected: false },
    { id: 2, name: 'B', selected: true },
    { id: 3, name: 'C', selected: false }]
}

Stackblitz

Answer 2

Try with ngModel/Data Binding. You can follow below code.

<ul>
  <li [ngClass]="{'blue' : checked, 'red': !checked}">
    <input type="checkbox"  [(ngModel)]="checked" />
  </li>
</ul>

Full Code Here - https://stackblitz.com/edit/angular-xsfx9q

Answer 3

To achieve expected result, use indexed toggle for each element in ngFor

1. Set index to toggle for each radio button
2. On every radio button check reset toggle array values to false
3. Update specific index to true every time on radio button
4. On radio button check, elements background changes to blue from red background

Code sample -https://codesandbox.io/s/angular-2be5t

app.component.js

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  toggle = [];
  status = "Enable";
  allSubjects = [
    {
      classTimeSubjectsName: "test1",
      classTimeSubjectsImage: ""
    },
    {
      classTimeSubjectsName: "test12",
      classTimeSubjectsImage: ""
    }
  ];

  enableDisableRule(i) {
     let idx = 0;
while (idx < this.allSubjects.length) {
  this.toggle[idx] = false;
  idx++;
}

this.toggle[i] = !this.toggle[i];
this.status = this.toggle[i] ? "Enable" : "Disable";
  }
}

<div class="container">
  <div class="col-sm-12 form-group">
    <p><strong> Select Your Subject</strong></p>
    <ng-container *ngFor="let subs of allSubjects; let i =index">
      <ul id="subList">
        <li [ngClass]="{'blue' : toggle[i], 'red': !toggle[i]}">
          <label>
            <input
              checked
              type="radio"
              name="ClassTimesSubjects"
              [(ngModel)]="subs.classTimeSubjectsName"
              [value]="subs.classTimeSubjectsName"
              [(ngModel)]="ClassTimesSubjects"
              #ClassSubjects="ngModel"
              required
              (click)="enableDisableRule(i)"
            />
            {{ subs.classTimeSubjectsName }}
            <img [src]="subs.classTimeSubjectsImage" id="subPics" />
          </label>
        </li>
      </ul>
    </ng-container>
  </div>
</div>