title: Why is '$event.target.checked' giving angular TypeError when i am trying to use it with mat-checkbox
body: <blockquote>
    <p>When i am trying to use $event.target.checked with angular mat-checkbox its giving an error sating that -"Cannot read property 'checked' of undefined at Object.eval [as handleEvent]"
    This is for passing multiple values for a checkbox on Angular8</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>onChange(cls: string, isChecked: boolean) {
    const clsFormArray = &lt; FormArray &gt; this.myForm.controls.usercls;
    if (isChecked) {
      clsFormArray.push(new FormControl(cls));
    } else {
      let index = clsFormArray.controls.findIndex(x =&gt; x.value == cls);
      clsFormArray.removeAt(index);
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-checkbox class="example-margin" (change)="onChange(data.cls, $event.target.checked)"&gt;
    {{ data.cls }}
  &lt;/mat-checkbox&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>&lt;mat-checkbox class="example-margin"(change)="onChange(data.cls,$event.target.checked)"&gt;
  {{ data.cls }}
  &lt;/mat-checkbox&gt;
      onChange(cls: string, isChecked: boolean) {
              const clsFormArray = &lt;FormArray&gt;this.myForm.controls.usercls;
              if (isChecked) {
                clsFormArray.push(new FormControl(cls));
              } else {
                let index = clsFormArray.controls.findIndex(x =&gt; x.value == cls);
                clsFormArray.removeAt(index);
              }
              }
  </code></pre>
  
  <blockquote>
    <p>i am expecting that the classes are pushed and added to the array so
    that i can print it</p>
  </blockquote>