limit number of checks for groups of checkboxes selected in angular

I am building Angular Website. I have data coming from server which contains info about options and sub options

in my html

 <div class="radiobox" *ngFor="let mainOption of data.cartItem.option[0].options">
          <h5 class="text-left" style="font-size: 16px;color: #4c5156;"></h5>
          <!-- <h6 class="text-left" style="font-size: 13px;color: #4c5156;">Choose Upto: </h6> -->
          <h6 class="text-left" style="font-size: 13px;color: #4c5156;">Choose Upto: </h6>
          <div class="row" style="flex-direction: column;margin: 0;">
            <div class="col-md-4" *ngFor="let option of mainOption.suboptions, let i = index " style="padding: 0;width: 100%;">
              <div class="row" style="margin: 0;">
                <div class="changed p-0" style="width: 15px;place-self: center;">
                  <input type="checkbox" class="float-right form-check-input position-static"
                    name=""  [value]='option' [(ngModel)]="option[i]"
                    (ngModelChange)='changeEventInRadioButton($event)' style="margin: 0;">
                </div>
                <div class="col-8 p-2">
                  <div class="float-left">
                    <span class="inputdisplay"> </span>
                    <br>
                    <span class="inputdisplay1" style="font-size: 14px;">+ </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

It creates multiple groups of checkboxes. in each group I need the user to be able to select limited number of options. which are present in mainOption.max

how is this possible for me to make this work?

Thanks!