diff --git a/src/lib/grid-list/grid-list.spec.ts b/src/lib/grid-list/grid-list.spec.ts index 8f5d4b6886c9..443ef44da5b1 100644 --- a/src/lib/grid-list/grid-list.spec.ts +++ b/src/lib/grid-list/grid-list.spec.ts @@ -32,6 +32,7 @@ describe('MatGridList', () => { GridListWithoutMatchingGap, GridListWithEmptyDirectionality, GridListWithRtl, + GridListWithIndirectTileDescendants, ], }); @@ -317,6 +318,15 @@ describe('MatGridList', () => { expect(tile.style.left).toBe(''); expect(tile.style.right).toBe('0px'); }); + + it('should lay out the tiles if they are not direct descendants of the list', () => { + const fixture = TestBed.createComponent(GridListWithIndirectTileDescendants); + fixture.detectChanges(); + + const tile = fixture.debugElement.query(By.directive(MatGridTile)); + expect(getStyle(tile, 'padding-top')).toBe('200px'); + }); + }); @@ -509,3 +519,17 @@ class GridListWithEmptyDirectionality { } providers: [{provide: Directionality, useValue: {value: 'rtl'}}] }) class GridListWithRtl { } + +@Component({ + // Note the blank `ngSwitch` which we need in order to hit the bug that we're testing. + template: ` +
+ + + + + +
+ ` +}) +class GridListWithIndirectTileDescendants {} diff --git a/src/lib/grid-list/grid-list.ts b/src/lib/grid-list/grid-list.ts index e2a7100f13e7..62fc20435525 100644 --- a/src/lib/grid-list/grid-list.ts +++ b/src/lib/grid-list/grid-list.ts @@ -62,7 +62,7 @@ export class MatGridList implements OnInit, AfterContentChecked { private _tileStyler: TileStyler; /** Query list of tiles that are being rendered. */ - @ContentChildren(MatGridTile) _tiles: QueryList; + @ContentChildren(MatGridTile, {descendants: true}) _tiles: QueryList; constructor(private _element: ElementRef, @Optional() private _dir: Directionality) {}