Adjust the radio button's color within an ngFor loop when it is selected

Question

Adjust the radio button's color within an ngFor loop when it is selected

When I select an item from my radio button list, I want to change its appearance by altering the background-color, text color, or highlighting. Unfortunately, due to the use of an ngFor loop for rendering the items, I am unable to achieve this as desired. Currently, on click, all the items in the list change color from red to blue instead of just the selected one.

I attempted using li::selection in CSS but it did not yield the expected results.


<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;
}

css angular angular6

Answer 1

Answer №1

It is recommended to utilize the following code snippet:

<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 }]
}

View on Stackblitz

Answer 2

It is recommended to utilize the following code snippet:

<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 }]
}

View on Stackblitz

Answer 3

Answer №2

Utilize ngModel and Data Binding for this task. Refer to the code snippet below.

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

For the complete code, click here - https://stackblitz.com/edit/angular-xsfx9q

Answer 4

Utilize ngModel and Data Binding for this task. Refer to the code snippet below.

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

For the complete code, click here - https://stackblitz.com/edit/angular-xsfx9q

Answer 5

Answer №3

For the desired outcome, implement indexed toggling for each element within ngFor.

Assign indexes for toggling to each radio button.
Upon selection of any radio button, reset all toggle array values to false.
Set the specific index to true every time a radio button is selected.
When a radio button is selected, change the background color of the elements from red to blue.

Sample code - 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>

Answer 6

For the desired outcome, implement indexed toggling for each element within ngFor.

Assign indexes for toggling to each radio button.
Upon selection of any radio button, reset all toggle array values to false.
Set the specific index to true every time a radio button is selected.
When a radio button is selected, change the background color of the elements from red to blue.

Sample code - 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>

Adjust the radio button's color within an ngFor loop when it is selected

Answer №1

Answer №2

Answer №3

Similar questions

Circular dependency detected between TransferHttpCacheModule, LocalizeRouterModule, and TranslateModule

Guide on transporting PNG files over the boundary

Launching npm using the command "npm run protractor" results in console errors being thrown upon completing the test

A guide to building a three-column card layout using the Bootstrap row class

Is there a way to dynamically modify a website's default viewport settings in a mobile browser?

What is the best way to add animation to switch between table rows?

The HTML/JS output displays a table with missing horizontal borders

Is it possible to make an asp:Panel extend beyond its boundaries to the right when dynamically incorporating controls into a webpage?

Elements styled as inline blocks with static dimensions, irregular in size

Shopify revamping the design of the collections

Some browsers are failing to display the navigation bar on my website

Customizing Dropdown Menus with Bootstrap

Align the text to the right within a display flex container

Is there a way to customize a chart in Ionic 2 to resemble the image provided?

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

Show an HTML image with the file chosen through the FileDialog prompt

Radio button validation issue in Angular not resolving

Background image for Semantic-UI modal

How can I vertically align a photo or image on Facebook?

What is the best way to rearrange three divs into two columns?