Skip to content

Commit ee4915c

Browse files
crisbetoandrewseguin
authored andcommitted
fix(button-toggle): support two-way binding of value (#7911)
Adds support for two-way data binding in the `value` property of the button toggle group. This is consistent with other components like `mat-select`.
1 parent 7c4b394 commit ee4915c

File tree

2 files changed

+18
-2
lines changed

2 files changed

+18
-2
lines changed

src/lib/button-toggle/button-toggle.spec.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,15 @@ describe('MatButtonToggle without forms', () => {
267267
expect(groupInstance.selected).toBe(buttonToggleInstances[0]);
268268
});
269269

270+
it('should propagate the value change back up via a two-way binding', () => {
271+
expect(groupInstance.value).toBeFalsy();
272+
buttonToggleLabelElements[0].click();
273+
fixture.detectChanges();
274+
275+
expect(groupInstance.value).toBe('test1');
276+
expect(testComponent.groupValue).toBe('test1');
277+
});
278+
270279
it('should update the group and toggles when one of the button toggles is clicked', () => {
271280
expect(groupInstance.value).toBeFalsy();
272281
buttonToggleLabelElements[0].click();
@@ -618,7 +627,7 @@ describe('MatButtonToggle without forms', () => {
618627
template: `
619628
<mat-button-toggle-group [disabled]="isGroupDisabled"
620629
[vertical]="isVertical"
621-
[value]="groupValue">
630+
[(value)]="groupValue">
622631
<mat-button-toggle value="test1">Test1</mat-button-toggle>
623632
<mat-button-toggle value="test2">Test2</mat-button-toggle>
624633
<mat-button-toggle value="test3">Test3</mat-button-toggle>

src/lib/button-toggle/button-toggle.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,11 +128,18 @@ export class MatButtonToggleGroup extends _MatButtonToggleGroupMixinBase
128128
set value(newValue: any) {
129129
if (this._value != newValue) {
130130
this._value = newValue;
131-
131+
this.valueChange.emit(newValue);
132132
this._updateSelectedButtonToggleFromValue();
133133
}
134134
}
135135

136+
/**
137+
* Event that emits whenever the value of the group changes.
138+
* Used to facilitate two-way data binding.
139+
* @docs-private
140+
*/
141+
@Output() valueChange = new EventEmitter<any>();
142+
136143
/** Whether the toggle group is selected. */
137144
@Input()
138145
get selected() {

0 commit comments

Comments
 (0)