fix(grid-list): unable to assign numeric zero as gutter size (#13652)

Author: crisbeto

src/lib/grid-list/grid-list.spec.ts

@@ -46,6 +46,14 @@ describe('MatGridList', () => {
     }).not.toThrow();
   });
 
+  it('should preserve value when zero is set as row height', () => {
+    const fixture = createComponent(GridListWithUnspecifiedRowHeight);
+    const gridList = fixture.debugElement.query(By.directive(MatGridList)).componentInstance;
+
+    gridList.rowHeight = 0;
+    expect(gridList.rowHeight).toBe('0');
+  });
+
   it('should set the columns to zero if a negative number is passed in', () => {
     const fixture = createComponent(GridListWithDynamicCols);
     fixture.detectChanges();
@@ -139,6 +147,24 @@ describe('MatGridList', () => {
     expect(getStyle(tiles[2], 'top')).toBe('101px');
   });
 
+  it('should be able to set the gutter size to zero', () => {
+    const fixture = createComponent(GridListWithUnspecifiedGutterSize);
+    const gridList = fixture.debugElement.query(By.directive(MatGridList));
+
+    gridList.componentInstance.gutterSize = 0;
+    fixture.detectChanges();
+
+    const tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile'));
+
+    // check horizontal gutter
+    expect(getStyle(tiles[0], 'width')).toBe('100px');
+    expect(getComputedLeft(tiles[1])).toBe(100);
+
+    // check vertical gutter
+    expect(getStyle(tiles[0], 'height')).toBe('100px');
+    expect(getStyle(tiles[2], 'top')).toBe('100px');
+  });
+
   it('should lay out the tiles correctly for a nested grid list', () => {
     const fixture = createComponent(NestedGridList);
     fixture.detectChanges();

src/lib/grid-list/grid-list.ts

@@ -85,12 +85,13 @@ export class MatGridList implements MatGridListBase, OnInit, AfterContentChecked
   /** Size of the grid list's gutter in pixels. */
   @Input()
   get gutterSize(): string { return this._gutter; }
-  set gutterSize(value: string) { this._gutter = `${value || ''}`; }
+  set gutterSize(value: string) { this._gutter = `${value == null ? '' : value}`; }
 
   /** Set internal representation of row height from the user-provided value. */
   @Input()
+  get rowHeight(): string | number { return this._rowHeight; }
   set rowHeight(value: string | number) {
-    const newValue = `${value || ''}`;
+    const newValue = `${value == null ? '' : value}`;
 
     if (newValue !== this._rowHeight) {
       this._rowHeight = newValue;