Angular - boolean value doesn't change

Question

I'm facing issue with my app. I'm trying to create a list of checkboxes, when the checkbox is clicked the value should be true and when clicked again the value should be false. Simple.

Here is my html

  <li *ngFor="let checkbox of checkboxSelect">
      <div class="checkbox-style">
          <input type="checkbox" name ="{{checkbox.inputName}}" 
                [checked]="checkbox.name"
                (change)="checkbox.name= !checkbox.name"/>
             <div class="state">
                 <label>{{checkbox.label}}</label>
             </div>
      </div>
  </li>

Here is my component.ts

showFirstName = true;
showLastName = true;

checkboxSelect: any[] = [{
        label: 'First name',
        name: this.showFirstName,
        inputName: 'showFirstName'
    }, {
        label: 'Last name',
        name: this.showLastName,
        inputName: 'showLastName'

    },
];

Everything is working except my 'name' value doesn't change to true/false when clicked.

On the other hand when I put that straight to html without *ngFor it's working

  <li>
      <div class="checkbox-style">
          <input type="checkbox" name = "firstName"
                [checked]="showFirstName"
                (change)="showFirstName = !showFirstName"/>
             <div class="state">
                 <label>First Name</label>
             </div>
      </div>
  </li>

I wasn't so clear, my goal is to display divs depend on true/false

 <div *ngIf="showFirstName" scope="col">First name</div>
<div *ngIf="showLastName" scope="col">Second name</div>

But it doesn't change at all.

Does anyone have an idea what's wrong with my code?

you should probably be using ngModel for this, but your expectations / issue is unclear. — bryan60
– bryan60, Commented May 29, 2020 at 14:02
Your code works without any issue: stackblitz.com/edit/angular-ivy-cfltoa. What is the problem you're facing? — Barremian
– Barremian, Commented May 29, 2020 at 14:34
Look here, stackblitz.com/edit/angular-ivy-ww1hyl I'm trying to display/hide these divs depnend on true/false but it doesn't work — Jan
– Jan, Commented May 29, 2020 at 14:40

Barremian · Accepted Answer · 2020-05-29 14:53:03Z

2

Based on your comment, you are trying to use variables showFirstName and showLastName that aren't modified by the event handler to show/hide strings First Name and Last Name. To make the value binding persist between two variables, you could make them objects. Objects are usually passed by reference in Javascript. Try the following

Controller

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  showFirstName = { status: true };
  showLastName = { status: true };

  checkboxSelect: any[] = [{
    label: 'First name',
    name: this.showFirstName,
    inputName: 'showFirstName'
  }, {
    label: 'Last name',
    name: this.showLastName,
    inputName: 'showLastName'

  }, ];

  checkStatus() {
    console.log(this.checkboxSelect[0].name, this.checkboxSelect[1].name);
  }
}

Template

<li *ngFor="let checkbox of checkboxSelect">
  <div class="checkbox-style">
    <input type="checkbox" name="{{checkbox.inputName}}" [checked]="checkbox.name.status"
      (change)="checkbox.name.status = !checkbox.name.status; checkStatus()" />
    <div class="state">
      <label>{{checkbox.label}}</label>
    </div>
  </div>
</li>

<table>
  <th *ngIf="showFirstName.status" scope="col">First Name</th>
  <th *ngIf="showLastName.status" scope="col">Last Name</th>
</table>

Note: Using object reference to control the state of variables could get very tangled later in development. Better way would be to think of a different structure.

Working example: Stackblitz

edited May 29, 2020 at 14:53

answered May 29, 2020 at 14:44

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

2 Comments

Jan Over a year ago

And it looks like I can use also use [(ngModel)]="checkbox.name.status" instead of (change)="checkbox.name.status = !checkbox.name.status")

Barremian Over a year ago

You can. It's another way of binding controller variables in Angular.

Aakash Garg · Accepted Answer · 2020-05-29 14:09:47Z

0

Change your html to :-

<li *ngFor="let checkbox of checkboxSelect">
      <div class="checkbox-style">
          <input type="checkbox" [name] ="checkbox.inputName" 
                [checked]="checkbox.name"
                (change)="checkbox.name = !checkbox.name"/>
             <div class="state">
                 <label>{{checkbox.label}}</label>
             </div>
      </div>
  </li>

answered May 29, 2020 at 14:09

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

2 Comments

Jan Over a year ago

It's working, the value changes to true/false but there is another problem. My another piece of html doesn't change <th *ngIf="showFirstName" scope="col">First Name</th> <th *ngIf="showLastName" scope="col">Last Name</th>

Aakash Garg Over a year ago

what is the problem?

Metalgear · Accepted Answer · 2020-05-29 14:14:39Z

0

Why don't you use Angular ngModel? Then you don't need to define change handler.

<li *ngFor="let checkbox of checkboxSelect">
      <div class="checkbox-style">
          <input type="checkbox" name ="{{checkbox.inputName}}" 
                [(ngModel)] ="checkbox.name"/>
             <div class="state">
                 <label>{{checkbox.label}}</label>
             </div>
      </div>
  </li>

answered May 29, 2020 at 14:14

Metalgear

3,4771 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular - boolean value doesn't change

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related