IONIC 5 : Checkbox ngModel two way binding doesn't work-CodePudding

I am trying to do the simple two-way binding with a checkbox but for some reason, it just not working. Have tried searching issue but my code is same as what other are suggesting but it's not working for me and I can't seem to see anything wrong.

my code in .ts

@Component({
  selector: 'app-investigation',
  templateUrl: './investigation.component.html',
  styleUrls: ['./investigation.component.scss'],
})
export class InvestigationComponent implements OnInit {

  iopa:boolean = true;
  constructor() { }

  ngOnInit() {}

  onIOPAChange() {
    console.log(this.iopa);
  }

}

Html template

 <ion-list>
  <ion-item >
    <ion-label>IOPA</ion-label>
    <ion-checkbox slot="start" [(ngModel)]="iopa" ngDefaultControl> 
    </ion-checkbox>
  </ion-item>
</ion-list>

When I check or uncheck the checkbox I don't see value change in "iopa" also even though I have set it to true, checkbox is not checked on load.

Thanks

CodePudding user response：

In html :

<ion-checkbox slot="start" [(ngModel)]="iopa" (ionChange)="onIOPAChange($event)"></ion-checkbox>

and in ts class:

onIOPAChange(ev: CustomEvent) {
    // CustomEvent can be changed to any but for better code complete we use it
    // this.ioap should give undefined here since change event fires before ngModel saves the value into the variable so in order to keep up to date with checkbox if checked or not , u can use this value of ev.target.value  and do your work...
    console.log(ev.target.value);
}

In case you just need the checkbox value for one time usage (insert without edit...) then you can remove attribute checked since its most main purpose is to make the checkbox as checked in case "this.iopa" was true...