diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts
index 569745937955..ab93e493c71f 100644
--- a/src/lib/button-toggle/button-toggle.spec.ts
+++ b/src/lib/button-toggle/button-toggle.spec.ts
@@ -25,6 +25,7 @@ describe('MdButtonToggle', () => {
ButtonTogglesInsideButtonToggleGroup,
ButtonToggleGroupWithNgModel,
ButtonTogglesInsideButtonToggleGroupMultiple,
+ ButtonToggleGroupWithInitialValue,
StandaloneButtonToggle,
],
});
@@ -320,6 +321,29 @@ describe('MdButtonToggle', () => {
expect(testComponent.modelValue).toBe('red');
expect(testComponent.lastEvent.value).toBe('red');
}));
+
+ });
+
+ describe('with initial value and change event', () => {
+
+ it('should not fire an initial change event', async(() => {
+ let fixture = TestBed.createComponent(ButtonToggleGroupWithInitialValue);
+ let testComponent = fixture.debugElement.componentInstance;
+ let groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup));
+ let groupInstance: MdButtonToggleGroup = groupDebugElement.injector.get(MdButtonToggleGroup);
+
+ fixture.detectChanges();
+
+ expect(groupInstance.value).toBe('red');
+ expect(testComponent.lastEvent).toBeFalsy();
+
+ groupInstance.value = 'green';
+ fixture.detectChanges();
+
+ expect(groupInstance.value).toBe('green');
+ expect(testComponent.lastEvent.value).toBe('green');
+ }));
+
});
describe('inside of a multiple selection group', () => {
@@ -532,3 +556,15 @@ class ButtonTogglesInsideButtonToggleGroupMultiple {
`
})
class StandaloneButtonToggle { }
+
+@Component({
+ template: `
+
+ Value Red
+ Value Green
+
+ `
+})
+class ButtonToggleGroupWithInitialValue {
+ lastEvent: MdButtonToggleChange;
+}
diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts
index 0fdbf82368c8..918d48945c37 100644
--- a/src/lib/button-toggle/button-toggle.ts
+++ b/src/lib/button-toggle/button-toggle.ts
@@ -12,7 +12,8 @@ import {
Output,
QueryList,
ViewEncapsulation,
- forwardRef
+ forwardRef,
+ AfterViewInit
} from '@angular/core';
import {
NG_VALUE_ACCESSOR,
@@ -52,7 +53,7 @@ export class MdButtonToggleChange {
'role': 'radiogroup',
},
})
-export class MdButtonToggleGroup implements ControlValueAccessor {
+export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor {
/** The value for the button toggle group. Should match currently selected button toggle. */
private _value: any = null;
@@ -65,6 +66,9 @@ export class MdButtonToggleGroup implements ControlValueAccessor {
/** The currently selected button toggle, should match the value. */
private _selected: MdButtonToggle = null;
+ /** Whether the button toggle group is initialized or not. */
+ private _isInitialized: boolean = false;
+
/** The method to be called in order to update ngModel. */
private _controlValueAccessorChangeFn: (value: any) => void = (value) => {};
@@ -81,6 +85,11 @@ export class MdButtonToggleGroup implements ControlValueAccessor {
@ContentChildren(forwardRef(() => MdButtonToggle))
_buttonToggles: QueryList = null;
+ /** TODO: internal */
+ ngAfterViewInit() {
+ this._isInitialized = true;
+ }
+
@Input()
get name(): string {
return this._name;
@@ -111,7 +120,12 @@ export class MdButtonToggleGroup implements ControlValueAccessor {
this._value = newValue;
this._updateSelectedButtonToggleFromValue();
- this._emitChangeEvent();
+
+ // Only emit a change event if the view is completely initialized.
+ // We don't want to emit a change event for the initial values.
+ if (this._isInitialized) {
+ this._emitChangeEvent();
+ }
}
}