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`.

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: `
   <mat-button-toggle-group [disabled]="isGroupDisabled"
                            [vertical]="isVertical"
-                           [value]="groupValue">
+                           [(value)]="groupValue">
     <mat-button-toggle value="test1">Test1</mat-button-toggle>
     <mat-button-toggle value="test2">Test2</mat-button-toggle>
     <mat-button-toggle value="test3">Test3</mat-button-toggle>

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<any>();
+
   /** Whether the toggle group is selected. */
   @Input()
   get selected() {