click event not triggering for input type checkbox in angular 7

Question

Click or change event not triggering when i click on input type checkbox

Html code:

<ul>
  <li *ngFor="let category of facet.value">
    <div class="checkbox">
      <input type="checkbox" name="{{facet.value[0].DisplayFacetName}}"
         [(ngModel)]="check" (click)="test($event)">
      <label for="{{category.Title}}">{{ category.Title }}</label>
    </div>
  </li>
</ul>

Component code:

test(event){
  console.log(event);
}

click event not triggering, there is no error any help?

Answer 1

Your input element only provides (change) and (input) events, no (click) events. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

Using change instead of click should work

(change)="test($event)"

Answer 2

You need to achieve click functionality with the event handler.

 <input  type="checkbox" name="{{facet.value[0].DisplayFacetName}}"
     [(ngModel)]="check" (ngModelChange)="test($event)"> Checkbox

<button (click)="test($event)">Change </button>  



   test(event){
  console.log(event);
}