How to prevent the change event from firing if I assign a value dynamically to it but not clicked?-CodePudding

 async onSectionRolesCheckBoxChange(item: ISectionRole, event) {
    if(!event) {
      return;
    }

<ion-checkbox slot="end" (ionChange)="onSectionRolesCheckBoxChange(item, $event)" 
        [checked]="item.selected">
        </ion-checkbox>

this event is supposed to be fired if I SELECT the checkbox but it keeps on firing even if I assign a value to the [checked] dynamically. It shouldn't. Only it should be fired I click check/uncheck

CodePudding user response：

You could use the vanialla click event instead of the ionChange event. However the $event in this case would be the MouseEvent, so you'd be losing the $event from ionChange event.

Try the following

<ion-checkbox 
  slot="end" 
  (click)="onSectionRolesCheckBoxChange(item, $event)" 
  [checked]="item.selected"
>
</ion-checkbox>

Update: get checkbox state

There are multiple methods to fetch current value of a tag. Better ways would be to use either a Reactive or template-driven form. Here I'd use a quick workaround using template reference variable to get the checked property of the tag.

<ion-checkbox 
  #role
  slot="end" 
  (click)="onSectionRolesCheckBoxChange(item, role.checked)" 
  [checked]="item.selected"
>
</ion-checkbox>

async onSectionRolesCheckBoxChange(item: ISectionRole, checked: boolean) {
  console.log(checked);
  // other statements
}