Toastr messages on conditional checkbox click angular

Introduction:

I have a table with one column of the table consisting of only checkboxes as values.I have a button named validate. I have a value above the table.The value which I have assigned is 4. I need to show a toastr message if I enable more no of checkboxes than the number given above.

Myissue:

For example if the number above is 4,I can only check upto 4 checkboxes. If more than 4 checkboxes are checked.I need to show an toastr error message on validate button click.

What I have tried(Optional read):

Html checkbox and validate button:

<td>
    <input  type="checkbox" id="vehicle2" name="vehicle2"
      (change)="addCheckValue(i,list.isTicked)"
      [checked]="list.isTicked"
      [disabled]="list.isDisabled">
    </td>
   <button type="button" class="btn btn-outline-success"
   (click)="error()"  ><span class="fa fa-plus"></span>Validate</button>

TS: Checkbox enable condition in TS:

 addCheckValue(index, isChecked) {
    if (isChecked === undefined) {
      isChecked = true;
    }
    this.listes[index].isTicked = isChecked;
    console.log(this.listes);
    if (this.listes[index].isTicked === true) {
      this.counts = this.counts + 1;
    }
    if (this.listes[index].isTicked === false) {
      this.counts = this.counts - 1;
    }
  }

Error message in TS:

 error(){
 if(this.counts>this.a){

    this.toastr.error(
  `More cheeckboxes enabled.Total checkbox enabled is ${this.counts}`,
  "Total Error",
  {
    timeOut: 3000
  }

);}
   

 }

So this code didn't work because the count variable above counted the number of clicks on checkboxes(both checked and unchecked) instead of counting how many checkboxes are checked. So if I have a value 4 and if I check and uncheck a single checkbox 5 times it will show error which is not What I wanted. Kindly help me if u know.

Stackblitzlink: https://stackblitz.com/edit/angular-ivy-4vnwed?file=src%2Fapp%2Fapp.module.ts

Note: Kindly let me know in the comments if my question is unclear