diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts index 6d67caa7e7df..f6031f5bf983 100644 --- a/src/lib/button-toggle/button-toggle.spec.ts +++ b/src/lib/button-toggle/button-toggle.spec.ts @@ -267,6 +267,15 @@ describe('MatButtonToggle without forms', () => { expect(groupInstance.selected).toBe(buttonToggleInstances[0]); }); + it('should propagate the value change back up via a two-way binding', () => { + expect(groupInstance.value).toBeFalsy(); + buttonToggleLabelElements[0].click(); + fixture.detectChanges(); + + expect(groupInstance.value).toBe('test1'); + expect(testComponent.groupValue).toBe('test1'); + }); + it('should update the group and toggles when one of the button toggles is clicked', () => { expect(groupInstance.value).toBeFalsy(); buttonToggleLabelElements[0].click(); @@ -618,7 +627,7 @@ describe('MatButtonToggle without forms', () => { template: ` + [(value)]="groupValue"> Test1 Test2 Test3 diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index 5c958cddc2bb..5ffd12ddfa31 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/src/lib/button-toggle/button-toggle.ts @@ -128,11 +128,18 @@ export class MatButtonToggleGroup extends _MatButtonToggleGroupMixinBase set value(newValue: any) { if (this._value != newValue) { this._value = newValue; - + this.valueChange.emit(newValue); this._updateSelectedButtonToggleFromValue(); } } + /** + * Event that emits whenever the value of the group changes. + * Used to facilitate two-way data binding. + * @docs-private + */ + @Output() valueChange = new EventEmitter(); + /** Whether the toggle group is selected. */ @Input() get selected() {