Ionic 2 Toggle event preventdefault


I have a Toggle switch. I want not to check or uncheck the toggle at first which is why I need to use preventDefault.

I have used ionChange() instead of click() event handler. But with ionChange handler, the cancelable or defaultPrevented property does not exists. So, it raises error that preventDefault() is not a function. However, with simple click handler, it does not raise any error but does not work either. I have also tried with stopPropagation().

Here is the code.


            <ion-toggle [(ngModel)]="appliance.state" (ionChange)="applianceChange($event)"></ion-toggle>


import { Component, EventEmitter } from '@angular/core';

  selector: 'appliances',
  templateUrl: 'appliances.html'
export class ApplianceModule {

 applianceChange(event: Event){


Maybe there isn’t any default event to prevent… Not sure.

But there is another approach to this if you don’t wanna use click event. You can replace applicance.state with a different property that has get/set methods. For example:

<ion-toggle [(ngModel)]="applianceState"></ion-toggle>
... class BlahModule {

appliance = {
  state: true

get applianceState() { return this.appliance.state }

set applianceState(state: boolean) {

  // some logic here
  this.appliance.state = state; // or w.e other value you wanna use here




I have what I believe is a similar situation, and here’s how I approached it:

<ion-toggle [checked]="appliance.state"
 (ionChange)="applianceChange($event, appliance)">
applianceChange(ctl: Toggle, app: Appliance): void {
  if (ctl.checked === app.state) {

  // do further things that may or may not change app.state