Angular 2 : Target Checkbox on div click

Question

when user clicks on div(class=unit) i want to target checkbox and mark it as checked/unchecked. also apply class unit-selected if checkbox is checked and remove class unit-selected if checkbox is unchecked.

i tried referring similar questions but nothing worked for me. can anyone help me to complete selectUnit($event)

<div class="unit" (click)="selectUnit($event)" [ngClass]="{'unit-selected'}">
        <input type="checkbox" name="unit" />
        <div class="unit-number">abc</div>
        <div class="unit-desc">Description</div>
      </div>
      
<div class="unit" (click)="selectUnit($event)" [ngClass]="{'unit-selected'}">
        <input type="checkbox" name="unit" />
        <div class="unit-number">xyz</div>
        <div class="unit-desc">Description</div>
      </div>
      
<div class="unit" (click)="selectUnit($event)" [ngClass]="{'unit-selected'}">
        <input type="checkbox" name="unit" />
        <div class="unit-number">mno</div>
        <div class="unit-desc">Description</div>
      </div>

Nehal · Accepted Answer · 2017-07-10 01:18:03Z

You can do something simple like giving each div's checkbox a name and pass the variable reference to a function triggered by click event, taking care of the toggle (since you want to toggle by clicking on the div, not just the checkbox itself). You can use the variable name to control ngClass condition and bind it to ngModel to handle the checkmark view.

Sample html:

<div class="unit" 
     (click)="toggleCheckbox('unitABC')"
     [ngClass]="{ 'unit-selected' : unitABC == true }">
   <input type="checkbox" name="unit" [(ngModel)]="unitABC">
   <div class="unit-number" >abc</div>
   <div class="unit-desc">Description</div>
</div>

component.ts:

unitABC = false;
unitXYZ = false;
unitMNO = false;

toggleCheckbox(currCheckbox){
  console.log(currCheckbox);
  switch(currCheckbox){
    case 'unitABC' :
      this.unitABC = !this.unitABC;
      break;
    case 'unitXYZ' :
      this.unitXYZ = !this.unitXYZ;
      break;
    case 'unitMNO' :
      this.unitMNO = !this.unitMNO;
      break;
  }
}

Full demo

Sanjeev S · Accepted Answer · 2020-03-03 10:36:43Z

1

Although @Nehal's answer is perfectly valid and will work if there are limited 'units', it will not scale well because you have to edit the switch statement every time, which violates the open/closed principle of SOLID.

If you are likely to use multiple, unknown amounts of 'units'. Consider using reactive forms like so (Plunker here):


    @Component({
      selector: 'my-app',
      template: `
      <form [formGroup]="form">
        <div formArrayName="unitArr">
          <div 
            *ngFor="let unit of units; let i = index"
            class="unit"
            (click)="onClick(i)"
            [ngClass]="{'unit-selected': unitArr.controls[i].value}">
              <input type="checkbox" formControlName="{{i}}"/>
              <div class="unit-number">{{ unit.num }}</div>
              <div class="unit-desc">{{ unit.desc }}</div>
          </div>
        </div>
      </form>
      `,
      styles: [`.unit-selected { color: red; }`]
    })
    export class App implements OnInit{
      private units = [
        {num: 1, desc: 'Decription'},
        {num: 2, desc: 'Decription'},
        {num: 3, desc: 'Decription'},
      ]
      private form: Form

      constructor (private fb: FormBuilder) {}

      ngOnInit () {
        this.form = this.fb.group({
          unitArr: this.fb.array(
            this.units.map((unit) => {
              return this.fb.control(false) // Set all initial values to false
            })
          )
        });
      }

      // Shorten for the template
      get unitArr (): FormArray {
        return this.form.get('unitArr') as FormArray;
      };

      onClick(i) {
        const control = this.unitArr.controls[i]
        control.setValue(!control.value) // Toggle checked
      }
    }

edited Mar 3, 2020 at 10:36

Sanjeev S

1,1632 gold badges14 silver badges34 bronze badges

answered Jul 10, 2017 at 10:51

Tom

5,1613 gold badges42 silver badges56 bronze badges

3 Comments

Jay Over a year ago

thanks can you please help me understand this.from, get unitarr and onclick function step by step .... sorry but i am new to this

Tom Over a year ago

this.form references the property defined earlier with private form: Form. I assign it a new [FormGroup](goo.gl/5gBcXY) with the this.fb.group method. get unitArr is so that I can write unitArr instead of this.form.get.... in the template. It is an [ES6 getter](goo.gl/FwnDdt). I assume you know how the onClick is called. It takes the index of the *ngFor loop as a param, gets the correlating control from the form array (unitArr as shortened earlier) and sets its value to the opposite of what it currently is by ['toggling'](goo.gl/i2h2rb) it. [tutorial](goo.gl/gkJb65)

Jay Over a year ago

thanks it worked for me. need one more help .... i got select all and unselect all checkbox .... how do i do it

Collectives™ on Stack Overflow

Angular 2 : Target Checkbox on div click

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related