Skip to content

Commit

Permalink
fix(grid-list): not picking up indirect descendants (#12823)
Browse files Browse the repository at this point in the history
Fixes tiles that aren't direct descendants of the grid list not being styled.

Fixes #12809.
  • Loading branch information
crisbeto authored and jelbourn committed Aug 27, 2018
1 parent e6347ff commit c04d2ae
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 1 deletion.
24 changes: 24 additions & 0 deletions src/lib/grid-list/grid-list.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ describe('MatGridList', () => {
GridListWithoutMatchingGap,
GridListWithEmptyDirectionality,
GridListWithRtl,
GridListWithIndirectTileDescendants,
],
});

Expand Down Expand Up @@ -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');
});

});


Expand Down Expand Up @@ -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: `
<div style="width:200px">
<mat-grid-list cols="1">
<ng-container [ngSwitch]="true">
<mat-grid-tile></mat-grid-tile>
</ng-container>
</mat-grid-list>
</div>
`
})
class GridListWithIndirectTileDescendants {}
2 changes: 1 addition & 1 deletion src/lib/grid-list/grid-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<MatGridTile>;
@ContentChildren(MatGridTile, {descendants: true}) _tiles: QueryList<MatGridTile>;

constructor(private _element: ElementRef, @Optional() private _dir: Directionality) {}

Expand Down

0 comments on commit c04d2ae

Please sign in to comment.