diff --git a/src/lib/grid-list/grid-list.spec.ts b/src/lib/grid-list/grid-list.spec.ts
index 17f956dfc79b..8f5d4b6886c9 100644
--- a/src/lib/grid-list/grid-list.spec.ts
+++ b/src/lib/grid-list/grid-list.spec.ts
@@ -3,6 +3,7 @@ import {Component, DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MatGridList, MatGridListModule} from './index';
import {MatGridTile, MatGridTileText} from './grid-tile';
+import {Directionality} from '@angular/cdk/bidi';
describe('MatGridList', () => {
@@ -29,6 +30,8 @@ describe('MatGridList', () => {
GridListWithFootersWithoutLines,
GridListWithFooterContainingTwoLines,
GridListWithoutMatchingGap,
+ GridListWithEmptyDirectionality,
+ GridListWithRtl,
],
});
@@ -297,6 +300,23 @@ describe('MatGridList', () => {
.toBe(true, 'Expected none of the tiles to have a negative `left`');
});
+ it('should default to LTR if empty directionality is given', () => {
+ const fixture = TestBed.createComponent(GridListWithEmptyDirectionality);
+ const tile: HTMLElement = fixture.debugElement.query(By.css('mat-grid-tile')).nativeElement;
+ fixture.detectChanges();
+
+ expect(tile.style.left).toBe('0px');
+ expect(tile.style.right).toBe('');
+ });
+
+ it('should set `right` styles for RTL', () => {
+ const fixture = TestBed.createComponent(GridListWithRtl);
+ const tile: HTMLElement = fixture.debugElement.query(By.css('mat-grid-tile')).nativeElement;
+ fixture.detectChanges();
+
+ expect(tile.style.left).toBe('');
+ expect(tile.style.right).toBe('0px');
+ });
});
@@ -317,7 +337,6 @@ function getComputedLeft(element: DebugElement): number {
}
-
@Component({template: ''})
class GridListWithoutCols { }
@@ -478,3 +497,15 @@ class GridListWithFooterContainingTwoLines { }
`})
class GridListWithoutMatchingGap { }
+
+@Component({
+ template: `Hello`,
+ providers: [{provide: Directionality, useValue: {}}]
+})
+class GridListWithEmptyDirectionality { }
+
+@Component({
+ template: `Hello`,
+ providers: [{provide: Directionality, useValue: {value: 'rtl'}}]
+})
+class GridListWithRtl { }
diff --git a/src/lib/grid-list/tile-styler.ts b/src/lib/grid-list/tile-styler.ts
index 6ce66c7acbf1..57969a1bac87 100644
--- a/src/lib/grid-list/tile-styler.ts
+++ b/src/lib/grid-list/tile-styler.ts
@@ -106,7 +106,7 @@ export abstract class TileStyler {
// The width and horizontal position of each tile is always calculated the same way, but the
// height and vertical position depends on the rowMode.
- let side = this._direction === 'ltr' ? 'left' : 'right';
+ let side = this._direction === 'rtl' ? 'right' : 'left';
tile._setStyle(side, this.getTilePosition(baseTileWidth, colIndex));
tile._setStyle('width', calc(this.getTileSize(baseTileWidth, tile.colspan)));
}