Angular2: change background color of div when checkbox is checked

Question

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>

I'm not sure I understand your markup. From this, it looks like isSelected is a single property on the component rather than a property on each item. Also, is the "selected-div" class meant to be applied to every div, selected or not? — sadq3377
– sadq3377, Commented Oct 17, 2018 at 16:09

Marshal · Accepted Answer · 2018-10-17 16:25:41Z

1

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>

answered Oct 17, 2018 at 16:25

Marshal

11.2k3 gold badges40 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marshal Over a year ago

Updated the answer to not require component function.

SiddAjmera · Accepted Answer · 2018-10-17 16:22:42Z

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.

sadq3377 · Accepted Answer · 2018-10-17 16:16:27Z

0

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

I'm assuming that each item will have an isSelected property.
I'm assuming that the "selected-div" class should only be applied if an item is selected.
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;
}

answered Oct 17, 2018 at 16:16

sadq3377

8371 gold badge6 silver badges18 bronze badges

Comments

Xinan · Accepted Answer · 2018-10-17 16:17:09Z

0

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':'' "

answered Oct 17, 2018 at 16:17

Xinan

3,1721 gold badge18 silver badges18 bronze badges

Comments

Prabath Perera · Accepted Answer · 2018-10-17 16:27:41Z

0

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

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

answered Oct 17, 2018 at 16:27

Prabath Perera

3502 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular2: change background color of div when checkbox is checked

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related