Issue while applying multiple conditions to checkbox in Angular 8 app

Question

I have four (3 for options and 1 for set plan) checkboxes in my form, with the following requirements:

If all the three options are checked, set plan gets checked automatically, and the options disappear
If set plan gets checked, other options also get checked automatically, and then disappear
If set plan gets unchecked, other options appear again and gets unchecked too

With my code below, 1 and 2 > 3 works fine, but 1 > 3 doesn't work (options don't get back when set plan checkbox is unchecked). What is missing in my code? Probably nothing difficult here, but I will appreciate any advice.

Here is a simplified Stackblitz describing the issue and the source code copied.

(Real code have some animations, so it is important to make all the options checked for requirement 2 before disappearing)

HTML

<div [ngClass]="setClass()">
<div class="option">Option One
<input type="checkbox" [(ngModel)]="opt01" [checked]="setplan"/>
</div><br />
<div class="option">Option Two
<input type="checkbox" [(ngModel)]="opt02" [checked]="setplan"/>
</div><br />
<div class="option">Option There
<input type="checkbox" [(ngModel)]="opt03" [checked]="setplan"/>
</div>
</div><br>

<div style="background-color: lightgreen; width: 50%">Set Plan
<input type="checkbox"  [(ngModel)]="setplan" [checked]="opt01 && opt02 && opt03"/>
</div>

TS

public opt01: boolean;
public opt02: boolean;
public opt03: boolean;

public setplan: boolean;

setClass() {
  if (
    (this.opt01 == true &&
      this.opt02 == true &&
      this.opt03 == true) ||
    this.setplan == true
  ) {
    return 'container-wrap -hidden';
  } else if (this.setplan == false) {
    return 'container-wrap';
  }
}

CSS (not important)

.container-wrap {
  height: 120px;
  position: relative;
  overflow-y: hidden;
}
.container-wrap.-hidden {
  height: 0px;
  position: relative;
}
.option {
  background-color: lightgray; 
  width: 50%
}

Did you check the browser dev tools whether the class name is toggled when you uncheck the setplan checkbox? — Sivaramakrishnan
– Sivaramakrishnan, Commented Mar 18, 2020 at 3:57

Sivaramakrishnan · Accepted Answer · 2020-03-18 04:09:50Z

2

I don't know why you do this much work. Probably the best way to do this is to use *ngIf directive.

Try this, for component html:

<div *ngIf="!setPlan" class="container-wrap">
<div class="option">Option One
<input type="checkbox" [(ngModel)]="opt01" [checked]="setplan"/>
</div><br />
<div class="option">Option Two
<input type="checkbox" [(ngModel)]="opt02" [checked]="setplan"/>
</div><br />
<div class="option">Option There
<input type="checkbox" [(ngModel)]="opt03" [checked]="setplan"/>
</div>
</div><br>

<div style="background-color: lightgreen; width: 50%">Set Plan
<input type="checkbox"  [(ngModel)]="setplan" [checked]="opt01 && opt02 && opt03"/>
</div>

Now you don't need a setClass() function at all. and no extra classes. so cleaner code. You can also animate angular components templates that uses *ngIf directive. for that also an example blog is here

edited Mar 18, 2020 at 4:09

answered Mar 18, 2020 at 4:03

Sivaramakrishnan

3905 silver badges18 bronze badges

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

1 Comment

Andrew Over a year ago

Actually, the reason for setting multiple classes - is because our design team has prepared it in advance, and they want to keep it. However, your solution should work, and I will definitely try it. Maybe I can persuade our designers to change their minds ;)

Arunkumar Ramasamy · Accepted Answer · 2020-03-18 05:01:00Z

1

You can add ngModelchange for your setplan input element for handling the change event.

`<div style="background-color: lightgreen; width: 50%">Set Plan
 <input type="checkbox"  [(ngModel)]="setplan" [checked]="opt01 && opt02 && opt03" 
         (ngModelChange)="changePlan($event)"/>
 </div>`

and then you create method in your ts file a name as changePlan(event)

changePlan(event) {
 if (!event) {
  this.opt01 = false;
  this.opt02 = false;
  this.opt03 = false;
 } else {
  this.opt01 = this.opt02 = this.opt03 = true;
 }
}

edited Mar 18, 2020 at 5:01

answered Mar 18, 2020 at 4:42

Arunkumar Ramasamy

7914 silver badges9 bronze badges

2 Comments

Andrew Over a year ago

Thank you, this works - but there is one other issue. When I apply your solution, setplan gets checked only after the second click on it. Do you know the reason?

Arunkumar Ramasamy Over a year ago

@Andrew I updated it. Kindly check the changePlan method as like above. It'll work

Collectives™ on Stack Overflow

Issue while applying multiple conditions to checkbox in Angular 8 app

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related