diff --git a/src/material/button-toggle/button-toggle.spec.ts b/src/material/button-toggle/button-toggle.spec.ts index cc66f085dd50..3c37aa3f1008 100644 --- a/src/material/button-toggle/button-toggle.spec.ts +++ b/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; - possibleValues = ['One', 'Two', 'Three']; - value = 'Two'; + possibleValues: (string | null)[] = ['One', 'Two', 'Three']; + value: string | null = 'Two'; } @Component({ diff --git a/src/material/button-toggle/button-toggle.ts b/src/material/button-toggle/button-toggle.ts index 2838742faa19..8ccdbce0ad52 100644 --- a/src/material/button-toggle/button-toggle.ts +++ b/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,6 +24,9 @@ import { ElementRef, EventEmitter, forwardRef, + HostAttributeToken, + inject, + InjectionToken, Input, OnDestroy, OnInit, @@ -26,17 +34,9 @@ import { 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) {