Angular4 - execute function if NOT all checkboxes are selected

Question

I have a main checkbox which has ngModel value as [(ngModel)]="formModel.acknowledged1 and on component it is set to false like

formModel = {
  acknowledged1 :false
}

And I have a table with n number of rows, each row having checkboxes with ngModel as [(ngModel)]="formModel.acknowledged so when i click on main checkbox, all checkboxes on tables get selected and then my function deleterow gets executed, but i want

If I select only singly checkbox from table rows, then some other function should get executed. see below to make my question clear. html -

<p>
<checkbox  [(ngModel)]="formModel.acknowledged1"  id="box1"   name="acknowledgement1"></checkbox></p>

<tbody  infiniteScroll
             [infiniteScrollDistance]="2"
             [infiniteScrollThrottle]="300"
             (scrolled)="onScroll()"
             [scrollWindow]="false">


<ng-container *ngFor="let data of allData>
                   <tr class= "row-break">             
                    <checkbox    [(ngModel)]="formModel.acknowledged1" id="box2"  name="acknowledgement2">
                     </checkbox>     
                       <td>
                         <a>{{data.Code}}</a>
                       </td>
                       <td>
                         {{data.Description}}
                       </td>
                    </tr>
               </ng-container>
           </tbody>

Component.ts -

export class CodesComponent implements OnInit{                                
  formModel = {
    acknowledged1 :false
  }                              
  ngOnInit (){ 
    deleteallrow(){
       if(this.formModel.acknowledged1==true){
          this.reasonCodesActions.deleterow();
        }

    deletesinglerow(){ }
  }

score 1 · Answer 1 · answered Mar 13 '18 at 14:49

You need to create an array with single booleans for every checkbox.

component.html

...

<ng-container *ngFor="let data of allData; let i = index;">
  <tr class="row-break">
    <checkbox
      (change)="changeBox(i)"
      [checked]="checkboxes[i]"
      id="box2"
      name="acknowledgement2"
    ></checkbox>

...
  </tr>
</ng-container>

component.ts

...

checkboxes = [];

changeBox(index) {
  if (this.checkboxes[index]) {
    return this.checkboxes[index] = !this.checkboxes[index];
  }

  return this.checkboxes[index] = true;
}

...

Something in the code could be wrong, I don't use Angular for a while, but that is the logic that I've used in the last time that I've made it!

Angular4 - execute function if NOT all checkboxes are selected

1 Answers1