CODEWITHSUNDEEP
cssangularcheckbox
D. K.
D. K.

Reputation: 151

Angular2: change background color of div when checkbox is checked

I am trying to set the background color of a div, when the checkbox next to it is checked.

The checkboxes are placed in their own div and the div I want to change the color is next to it.

I have a checkbox, which toggles all other checkboxes and if I toggle that checkbox, it toggles the color for all divs, but I want to have it individually as well for just the adjacent div.

This is what I have so far:

<div class="select-all-checkbox">
  <input type="checkbox" name="all" checked [checked]="isAllSelected" (change)="isSelected = !isSelected">
</div>

<div class="grid" *ngFor="let item of items; let i = index;">
  <div class="selection">
    <input type="checkbox" [checked]="isSelected">
  </div>
  <div class="selected-div" [style.background-color]="isSelected ? '#00B7A8':'' ">
  </div>
</div>

Upvotes: 0

Views: 3523

Answers (5)

Prabath Perera
Prabath Perera

Reputation: 350

Your code is slightly incorrect. You should use backgroundColor instead of background-color

 <div class="selected-div" [style.backgroundColor]="isSelected ? '#00B7A8':'' ">
  </div>

Upvotes: 0

Marshal
Marshal

Reputation: 11081

You could use a template reference defined by the index in combination with a change event to set the div color by checkbox.

HTML

<div class="grid" *ngFor="let item of items; let i = index;">
  <div class="selection">
    <input #i type="checkbox" (change)="!i['checked']">
  </div>
  <div class="selected-div" [style.background-color]="i.checked ? '#00B7A8':'' ">
    test {{i.checked}}
  </div>
</div>

Upvotes: 1

SiddAjmera
SiddAjmera

Reputation: 39432

The change of the select all checkbox should change it's as well as the checked state of all the other checkboxes in the list. So we'll be doing that by calling the toggleAllSelection method on the component.

After that, we'll be also managing the state of each checkbox using [(ngModel)]="item.selected", which would mean that each item in your list needs to have a selected property of type boolean

Your markup needs to change, and so does your properties:

<div class="select-all-checkbox">
  <input 
    type="checkbox" 
    name="all" 
    [checked]="areAllSelected" 
    (change)="toggleAllSelection()">
</div>

<div 
  class="grid" 
  *ngFor="let item of items; let i = index;">
  <div class="selection">
    <input 
      type="checkbox" 
      [(ngModel)]="item.selected" 
      [checked]="item.selected">
  </div>
  <div 
    class="selected-div" 
    [style.backgroundColor]="item.selected ? 'red': 'white' ">
    Div {{ i + 1 }} Content
  </div>
</div>

In your Component class:

areAllSelected = false;

items = [
  { name: 'ITem 1', selected: false },
  { name: 'ITem 1', selected: false },
  { name: 'ITem 1', selected: false },
  { name: 'ITem 1', selected: false },
  { name: 'ITem 1', selected: false }
];

toggleAllSelection() {
  this.areAllSelected = !this.areAllSelected;
  this.items = this.items.map(item => ({ ...item, selected: this.areAllSelected}));
}

Here's a Sample StackBlitz for your ref.

Upvotes: 1

Xinan
Xinan

Reputation: 3162

Because isSelected is a global variable which is not attached to any of your items.

You need a property for your item, such as item.isSelected.

And then set the background by checking the value of that member.

[style.background-color]="item.isSelected ? '#00B7A8':'' "

Upvotes: 0

sadq3377
sadq3377

Reputation: 827

Try using the ngClass directive. Here's an example, with a couple assumed changes to your markup:

  1. I'm assuming that each item will have an isSelected property.
  2. I'm assuming that the "selected-div" class should only be applied if an item is selected.
  3. I left off the select all checkbox, since it looks like it's causing a little confusion.

If you clarify whether those are decent assumptions, I'll update this answer.

<div class="grid" *ngFor="let item of items; let i = index;">
  <div class="selection">
    <input type="checkbox" [checked]="item.isSelected">
  </div>
  <div [ngClass]="{'selected-div' : item.isSelected}">
  </div>
</div>

In CSS:

.selected-div{
    background-color: #00B7A8;
}

Upvotes: 0

Related Questions