fix(toggle): do not fire change when initializing

Closes #6144

Author: adamdbradley

ionic/components/checkbox/checkbox.ts

@@ -70,6 +70,7 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
 })
 export class Checkbox {
   private _checked: boolean = false;
+  private _init: boolean;
   private _disabled: boolean = false;
   private _labelId: string;
   private _fn: Function;
@@ -127,7 +128,9 @@ export class Checkbox {
   private _setChecked(isChecked: boolean) {
     if (isChecked !== this._checked) {
       this._checked = isChecked;
-      this.change.emit(this);
+      if (this._init) {
+        this.change.emit(this);
+      }
       this._item && this._item.setCssClass('item-checkbox-checked', isChecked);
     }
   }
@@ -185,6 +188,13 @@ export class Checkbox {
    */
   onTouched() {}
 
+  /**
+   * @private
+   */
+  ngAfterContentInit() {
+    this._init = true;
+  }
+
   /**
    * @private
    */

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

@@ -42,6 +42,14 @@ class E2EApp {
     this.grapeDisabled = !this.grapeDisabled;
   }
 
+  appleChange(ev) {
+    console.log('appleChange', ev);
+  }
+
+  bananaChange(ev) {
+    console.log('bananaChange', ev);
+  }
+
   kiwiChange(ev) {
     console.log('kiwiChange', ev);
     this.kiwiValue = ev.checked;

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

@@ -19,12 +19,12 @@
 
       <ion-item>
         <ion-label>Apple, ngControl</ion-label>
-        <ion-toggle ngControl="appleCtrl"></ion-toggle>
+        <ion-toggle ngControl="appleCtrl" (change)="appleChange($event)"></ion-toggle>
       </ion-item>
 
       <ion-item>
         <ion-label>Banana, ngControl</ion-label>
-        <ion-toggle ngControl="bananaCtrl"></ion-toggle>
+        <ion-toggle ngControl="bananaCtrl" (change)="bananaChange($event)"></ion-toggle>
       </ion-item>
 
       <ion-item>

ionic/components/toggle/toggle.ts

@@ -80,6 +80,7 @@ const TOGGLE_VALUE_ACCESSOR = new Provider(
 })
 export class Toggle implements ControlValueAccessor  {
   private _checked: boolean = false;
+  private _init: boolean;
   private _disabled: boolean = false;
   private _labelId: string;
   private _activated: boolean = false;
@@ -191,9 +192,12 @@ export class Toggle implements ControlValueAccessor  {
    * @private
    */
   private _setChecked(isChecked: boolean) {
+    console.debug('_setChecked')
     if (isChecked !== this._checked) {
       this._checked = isChecked;
-      this.change.emit(this);
+      if (this._init) {
+        this.change.emit(this);
+      }
       this._item && this._item.setCssClass('item-toggle-checked', isChecked);
     }
   }
@@ -248,6 +252,13 @@ export class Toggle implements ControlValueAccessor  {
    */
   onTouched() {}
 
+  /**
+   * @private
+   */
+  ngAfterContentInit() {
+    this._init = true;
+  }
+
   /**
    * @private
    */