How to get checkbox click event on change

Question

how to get checkbox click event on the change in angular 5 i have used the following code

html code

  <mat-accordion>
         <mat-expansion-panel>
            <mat-expansion-panel-header>
                option
              </mat-expansion-panel-header> 
              <mat-checkbox *ngFor="let option of options; let i = index"
              value="option" [checked]="options.indexOf(option) >= 0"
                               (change)="updateCheckedOptions(option, $event)">  {{option}}</mat-checkbox>
            </mat-expansion-panel>
        </mat-accordion>

ts code

initOptionsMap() {
  for (let x = 0; x<this.order.options.length; x++) {
      this.optionsMap[this.options[x]] = true;
  }
}
updateCheckedOptions(option, event) {
  this.optionsMap[option] = event.target.checked;
}
updateOptions() {
  for(const x in this.optionsMap) {
      if(this.optionsMap[x]) {
          this.optionsChecked.push(x);
      }
  }
  this.options = this.optionsChecked;
  this.optionsChecked = [];
}

and i am geting error as

ERROR TypeError: Cannot read property 'checked' of undefined

please help me with a solution

Answer 1

The event object doesn't have a target property (this is what the error is telling you).

What you are looking for is most likely the checked property of the event object itself, so you can modify your function like this:

updateCheckedOptions(option, event) {
  this.optionsMap[option] = event.checked;
}