Checkbox disable in angular

Question

I have a table. I have a column which has only checkboxes as values in it. I have brought all values into a table using for loop.What I did was when I enable a checkbox, I showed a message "hey" When I enable one checkbox (the message appears) but when I enable another checkbox the message disappears.The message initially comes when even one checkbox gets enabled. What I need is that until all the checkbox gets disabled the message should be there and evenwhen one or more checkboxes are there the message should be there.I am writing my code in angular.

Here is my stackblitz link https://stackblitz.com/edit/angular-oswf2h?file=src%2Fapp%2Fapp.component.ts

Answer 1

You should store the input values and provide a result based on the stores values.

Example with ngModel:

checkedValues: boolean[] = this.a.map(() => false);

  get isChecked() {
    return this.checkedValues.some(b => b);
  }

<div>
    <div class="Container" style="margin-left: 10px;">
        <div class="table-responsive">
            <table class="table">
                <thead class="table_header">
                    <tr>
                        <th>Name</th>
                        <th>Checkbox</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let b of a; let i = index">
                        <td>{{b.name}}</td>
                        <td> <input type="checkbox" id="vehicle1" name="vehicle1" [(ngModel)]="checkedValues[i]">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div *ngIf="isChecked">
        <h1>Hey</h1>
    </div>
</div>

Changed stackblitz: https://stackblitz.com/edit/angular-jwpane?file=src/app/app.component.html

Answer 2

I changed up you code a bit to make it work. There could be many ways to do this, but i decided to try as little as possible changes.

Store the check state for each separate checkbox.

a = [
{ name: "a", check: false },
{ name: "b", check: false },
{ name: "c", check: false }
];

On checkBtn press receive the item from front end and go through all items to see if all are disabled

checkBtn(b) {
    b.check = !b.check;
    let check = false;
    this.a.forEach(item => {
      if (item.check) {
        check = true;
      }
    });
    this.ischeck = check;
  }

Finally pass the item from frontend

            <tr *ngFor="let b of a;">
                <td>{{b.name}}</td>
                <td> <input type=" checkbox" id="vehicle1" name="vehicle1"  (click)=" checkBtn(b)">
                </td>
            </tr>

Answer 3

The problem is that all your checkboxes are connected to the same boolean, so they just toggle it. When one is clicked, regardless of whick one, ischeck gets the value of true. When a checkbox is clicked, either the same one or a different one, it gets toggled again so now ischeck is false. One possible solution is to have a different check per each checkbox, and display the message based on a logical OR.

See this stackblitz solution here

updated ts file:

  ischeck: boolean = false;
  a = [
    { name: "a", isCheck: false },
    { name: "b", isCheck: false },
    { name: "c", isCheck: false }
  ];

  checkBtn(b: { name: string; isCheck: boolean }) {
    b.isCheck = !b.isCheck;
    this.ischeck = this.a.some(c => c.isCheck); // at least one item has checked as
  }

and change in HTML:

<input type=" checkbox" id="vehicle1" name="vehicle1"  (click)=" checkBtn(b)">

EDIT: updated the code to simulate getting data from a service ts simulation:

  a = [];

  ngOnInit() {
    this.a = [{ name: "a" }, { name: "b" }, { name: "c" }]; //returned from service
    this.a.map(v => { //data changes to add boolean
      return { ...v, isCheck: false };
    });
  }