fix(button-toggle): fix button toggle with 0 value not checked

Author: tinayuangao

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

@@ -205,6 +205,7 @@ describe('MatButtonToggle without forms', () => {
       declarations: [
         ButtonTogglesInsideButtonToggleGroup,
         ButtonTogglesInsideButtonToggleGroupMultiple,
+        FalsyButtonTogglesInsideButtonToggleGroupMultiple,
         ButtonToggleGroupWithInitialValue,
         StandaloneButtonToggle,
         ButtonToggleWithAriaLabel,
@@ -694,6 +695,22 @@ describe('MatButtonToggle without forms', () => {
       expect(fixture.componentInstance.toggleGroup.value).toBe('Seven');
       expect(fixture.componentInstance.toggles.toArray()[2].checked).toBe(true);
     });
+
+  it('should select falsy button toggle value in multiple selection', () => {
+    const fixture = TestBed.createComponent(FalsyButtonTogglesInsideButtonToggleGroupMultiple);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.toggles.toArray()[0].checked).toBe(true);
+    expect(fixture.componentInstance.toggles.toArray()[1].checked).toBe(false);
+    expect(fixture.componentInstance.toggles.toArray()[2].checked).toBe(false);
+
+    fixture.componentInstance.value = [0, false];
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.toggles.toArray()[0].checked).toBe(true);
+    expect(fixture.componentInstance.toggles.toArray()[1].checked).toBe(false);
+    expect(fixture.componentInstance.toggles.toArray()[2].checked).toBe(true);
+  });
 });
 
 @Component({
@@ -748,6 +765,21 @@ class ButtonTogglesInsideButtonToggleGroupMultiple {
   isVertical: boolean = false;
 }
 
+@Component({
+  template: `
+  <mat-button-toggle-group multiple [value]="value">
+    <mat-button-toggle [value]="0">Eggs</mat-button-toggle>
+    <mat-button-toggle [value]="null">Flour</mat-button-toggle>
+    <mat-button-toggle [value]="false">Sugar</mat-button-toggle>
+    <mat-button-toggle>Sugar</mat-button-toggle>
+  </mat-button-toggle-group>
+  `
+})
+class FalsyButtonTogglesInsideButtonToggleGroupMultiple {
+  value: ('' | number | null | undefined | boolean)[] = [0];
+  @ViewChildren(MatButtonToggle) toggles: QueryList<MatButtonToggle>;
+}
+
 @Component({
   template: `
   <mat-button-toggle>Yes</mat-button-toggle>

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

@@ -264,7 +264,7 @@ export class MatButtonToggleGroup extends _MatButtonToggleGroupMixinBase impleme
     }
 
     if (this.multiple && Array.isArray(this._rawValue)) {
-      return !!this._rawValue.find(value => toggle.value != null && value === toggle.value);
+      return null != this._rawValue.find(value => toggle.value != null && value === toggle.value);
     }
 
     return toggle.value === this._rawValue;