fix(material/button-toggle): make null value selected on init

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

@@ -1004,6 +1004,22 @@ describe('MatButtonToggle without forms', () => {
     expect(fixture.componentInstance.toggles.toArray()[1].checked).toBe(true);
   });
 
+  it('should not throw on init when toggles are repeated and there is an initial value null', () => {
+    const fixture = TestBed.createComponent(RepeatedButtonTogglesWithPreselectedValue);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.toggleGroup.value).toBe('Two');
+    expect(fixture.componentInstance.toggles.toArray()[1].checked).toBe(true);
+
+    fixture.componentInstance.possibleValues = [null, 'Five', 'Six'];
+    fixture.componentInstance.value = null;
+    fixture.changeDetectorRef.markForCheck();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.toggleGroup.value).toBe(null);
+    expect(fixture.componentInstance.toggles.toArray()[0].checked).toBe(true);
+  });
+
   it('should not throw on init when toggles are repeated and there is an initial value', () => {
     const fixture = TestBed.createComponent(ButtonToggleWithStaticName);
     fixture.detectChanges();
@@ -1245,8 +1261,8 @@ class RepeatedButtonTogglesWithPreselectedValue {
   @ViewChild(MatButtonToggleGroup) toggleGroup: MatButtonToggleGroup;
   @ViewChildren(MatButtonToggle) toggles: QueryList<MatButtonToggle>;
 
-  possibleValues = ['One', 'Two', 'Three'];
-  value = 'Two';
+  possibleValues: (string | null)[] = ['One', 'Two', 'Three'];
+  value: string | null = 'Two';
 }
 
 @Component({

src/material/button-toggle/button-toggle.ts

@@ -7,10 +7,15 @@
  */
 
 import {_IdGenerator, FocusMonitor} from '@angular/cdk/a11y';
+import {Direction, Directionality} from '@angular/cdk/bidi';
 import {SelectionModel} from '@angular/cdk/collections';
-import {DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW, SPACE, ENTER} from '@angular/cdk/keycodes';
+import {DOWN_ARROW, ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE, UP_ARROW} from '@angular/cdk/keycodes';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 import {
   AfterContentInit,
+  AfterViewInit,
+  ANIMATION_MODULE_TYPE,
+  booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -19,24 +24,19 @@ import {
   ElementRef,
   EventEmitter,
   forwardRef,
+  HostAttributeToken,
+  inject,
+  InjectionToken,
   Input,
   OnDestroy,
   OnInit,
   Output,
   QueryList,
   ViewChild,
   ViewEncapsulation,
-  InjectionToken,
-  AfterViewInit,
-  booleanAttribute,
-  inject,
-  HostAttributeToken,
-  ANIMATION_MODULE_TYPE,
 } from '@angular/core';
-import {Direction, Directionality} from '@angular/cdk/bidi';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {MatRipple, MatPseudoCheckbox, _StructuralStylesLoader} from '@angular/material/core';
-import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
+import {_StructuralStylesLoader, MatPseudoCheckbox, MatRipple} from '@angular/material/core';
 
 /**
  * @deprecated No longer used.
@@ -513,7 +513,7 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
   /** Selects a value if there's a toggle that corresponds to it. */
   private _selectValue(value: any, toggles: MatButtonToggle[]) {
     for (const toggle of toggles) {
-      if (toggle.value != null && toggle.value === value) {
+      if (toggle.value === value) {
         toggle.checked = true;
         this._selectionModel.select(toggle);
         if (!this.multiple) {