feat(toggle): add change event

Related #5513

ionic/components/toggle/test/basic/index.ts

@@ -18,8 +18,8 @@ class E2EApp {
   fruitsForm: ControlGroup;
   grapeDisabled: boolean;
   grapeChecked: boolean;
-  kiwiModel: boolean;
-  strawberryModel: boolean;
+  kiwiValue: boolean;
+  strawberryValue: boolean;
   formResults: string;
 
   constructor() {
@@ -32,9 +32,6 @@ class E2EApp {
 
     this.grapeChecked = true;
     this.grapeDisabled = true;
-
-    this.kiwiModel = true;
-    this.strawberryModel = false;
   }
 
   toggleGrapeChecked() {
@@ -45,6 +42,16 @@ class E2EApp {
     this.grapeDisabled = !this.grapeDisabled;
   }
 
+  kiwiChange(ev) {
+    console.log('kiwiChange', ev);
+    this.kiwiValue = ev.checked;
+  }
+
+  strawberryChange(ev) {
+    console.log('strawberryChange', ev);
+    this.strawberryValue = ev.checked;
+  }
+
   doSubmit(ev) {
     console.log('Submitting form', this.fruitsForm.value);
     this.formResults = JSON.stringify(this.fruitsForm.value);

ionic/components/toggle/test/basic/main.html

@@ -28,13 +28,13 @@
       </ion-item>
 
       <ion-item>
-        <ion-label>Kiwi, NgModel false, Secondary color</ion-label>
-        <ion-toggle secondary [(ngModel)]="kiwiModel"></ion-toggle>
+        <ion-label>Kiwi, (change) Secondary color</ion-label>
+        <ion-toggle secondary (change)="kiwiChange($event)"></ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Strawberry, NgModel true</ion-label>
-        <ion-toggle [(ngModel)]="strawberryModel"></ion-toggle>
+        <ion-label>Strawberry, (change) [checked]="true"</ion-label>
+        <ion-toggle danger (change)="strawberryChange($event)" [checked]="true"></ion-toggle>
       </ion-item>
 
     </ion-list>
@@ -56,8 +56,8 @@
     <code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
     <code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
     <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
-    <code>kiwiModel: {{kiwiModel}}</code><br>
-    <code>strawberryModel: {{strawberryModel}}</code><br>
+    <code>kiwiValue: {{kiwiValue}}</code><br>
+    <code>strawberryValue: {{strawberryValue}}</code><br>
   </p>
 
   <pre aria-hidden="true" padding>{{formResults}}</pre>