Angular how to get the multiple checkbox values?

The problem with the @AJT_82 answer is that if you want to modify the model using form.reset() or or form.patchValue(), it won't work. To resolve these problems you need to implement ControlValueAccessor interface. Basically you need to create 2 components: group component which holds the model value and implements ControlValueAccessor and checkbox component, the actual checkbox. I have written a blog post with detailed explanation as well as created a plunker which demonstrate some examples.

Final usage:

<checkbox-group [(ngModel)]="selectedItems">
    <checkbox value="item1">Item 1</checkbox>
    <checkbox value="item2">Item 2</checkbox>
    <checkbox value="item3">Item 3</checkbox>
    <checkbox value="item4">Item 4</checkbox>
</checkbox-group>

Implementation of group component:

@Component({
selector: 'checkbox-group',
template: `<ng-content></ng-content>`,
providers: [{
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CheckboxGroupComponent),
      multi: true
    }]
 })
export class CheckboxGroupComponent implements ControlValueAccessor {
  private _model: any;

  // here goes implementation of ControlValueAccessor
  ...

  addOrRemove(value: any) {
    if (this.contains(value)) {
        this.remove(value);
    } else {
        this.add(value);
    }
  }

  contains(value: any): boolean {
    if (this._model instanceof Array) {
        return this._model.indexOf(value) > -1;
    } else if (!!this._model) {
        return this._model === value;
    }

    return false;
  }

  // implementation for add and remove
  ...
}

Checkbox component:

@Component({
selector: 'checkbox',
template: `
  <div (click)="toggleCheck()">
    <input type="checkbox" [checked]="isChecked()" />
    <ng-content></ng-content>
  </div>`
})
export class CheckboxComponent {
  @Input() value: any;

  constructor(@Host() private checkboxGroup: CheckboxGroupComponent) {
  }

  toggleCheck() {
    this.checkboxGroup.addOrRemove(this.value);
  }

  isChecked() {
    return this.checkboxGroup.contains(this.value);
  }
}

Child checkbox controls have reference to group component (@Host() decorator). When a checkbox is clicked toggleCheck() call addOrRemove() method on group component and if checkbox's value is already in the model, it is removed, otherwise it is added to the model.

For Angular 2+ check this example link

You can get array of checked data:

<input .... (change)="onChange(data)" />
onChange(data){
   data.checked = !data.checked;
}

to get all checked value

let checkedValues = userdata.filter(x => x.checked).map(x => x.email);

I did this function at input for the load form auto select:

[checked]="this.selected? this.selected.type.includes(type) : false"

Full code:

<label *ngFor="let type of this.entityType" class="checkbox-inline c-checkbox">
<input type="checkbox" [checked]="this.selected? this.selected.type.includes(type) : false" (change)="onChangeEntityType(type, $event.target.checked)"/>
<span class="fa fa-check"></span>{{type | translate}}</label>

Where

this.selected

is my object and

this.selected.type.includes(type)

auto check if checkboxes will be checked.

I have solved in two different ways One with simple checkbox array - mat-checkbox and the other with mat-selection-list.

Gist of the code in the post. At the value you can set all kind of combinations. In my case I've used concatination of id and description in order to init the form controls at the end from one source..

https://medium.com/@2bhere4u/angular-5-material-design-checkbox-array-reactive-forms-handle-3885dde366ca

My issue was with cleaning the checkbox array in a more simple example.. No time to waste .. Running along to the next tasks.. :)

This was my approach, I used this for ionic cordova Contacts plugin to get multiple Contacts from addressbook and add the selected Contact.

HTML

<div *ngFor="let c of addressBook" tappable class="px-2">
  <input type="checkbox"  (change)="onChangeContact($event,c)">
  <p>{{ c.displayName }}</p>
 </div>

TS

onChangeContact($event, c) { 
    if ($event.target.checked) {
      this.tempArr.push(c);
    } else {
      let i: number = 0;
      this.tempArr.forEach((item: any) => {
        console.log(item);
        if (item.displayName == c.displayName) {
          this.tempArr.splice(i, 1);
          return;
        }
        i++;
      });
    }
  }