How to save checkbox status within an angular dropdown?

Question

I’m using a department object to display some checkboxes within a dropdown. When I click on the dropdown, it loads this object and shows the checkboxes.

The problem is that I don’t know how to store the options that were marked in these checkboxes.

HTML

let obj = {"structures":[{"code":123,"departmentName":"BELEZA","sectorCode":456,"sectorName":"BELEZA"}]}

let teste = Object.assign({}, obj);

            this.department.checkedSector = !this.department.checkedSector;

            if (_event.target.defaultValue) {
              this.department.sector = []

              teste.structures.forEach(e => {
                this.department.sector.push({
                  ...e,
                  checked: this.department.checkedSector
                })
              })

            } else {
              this.department.sector = teste.structures;
              this.department.includedSector = teste.structures;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div class="col-md-3 mt-10" *ngFor="let item of department.list">
              <div class="form-group">
                <button class="multiselect" type="button">
                  <label (click)="getCategories($event)">
                    <input type="checkbox" [value]="item.departmentCode">
                    <span [id]="item.departmentCode" [innerText]="item.departmentName"></span>
                  </label>
                </button>
                <ul>
                  <li *ngFor="let item of department.sector; let i = index">
                    <label (click)="sector(item.sectorCode)">
                      <input type="checkbox" [checked]="item.checked">
                      <span [innerText]="item.sectorName"></span>
                    </label>
                  </li>
                </ul>
              </div>
            </div>

Answer 1

Hello!

You can use [(ngModel)] to update the view and its variables automatically;

 <input type="checkbox" [(ngModel)]="item.checked">

I made an example on stackblits for you to see: https://stackblitz.com/edit/angular-ivy-p4sojw?file=src/app/app.component.html