CheckBox.html

<div class="form-group">
          <label for="user_role">User Roles</label>
          <div id="user_role" class="checkbox" *ngFor="let role of roles">
            <div class="col-sm-4">
              <label>
                <input type="checkbox"
                       value="{{role.id}}"
                       [checked]=role.status
                       (change)="changeRole(role)"/>
                {{ role.role_name }}
              </label>
            </div>
          </div>
        </div>

checkbox.ts

roles: Role[] = [];

  user_roles_ids: number[] = [];
  
  onGettingUserRoles() {
    this.getCheckedValues();
    this.model.roles = this.checkedValues;
    this._httpService.getUserRoles()
      .subscribe(
        data => this.roles = data,
        error => alert(error),
        () => {
          for (let i = 0; i < this.roles.length; i++) {
            this.roles[i].status = false;
          }
        }
      );
  }

  checkedValues: number[] = [];

  getCheckedValues() {
    this.checkedValues = [];
    for (let i = 0; i < this.roles.length; i++) {
      if (this.roles[i].status) {
        this.checkedValues.push(this.roles[i].id)
        if (this.roles[i].id == 1) {
          this.model.is_admin = true;
        }
      }
    }
  }
  
   changeRole(role: Role) {
    this.roles[this.roles.indexOf(role)].status = !role.status;
  }