From e7fc52b2674ace599a77d0097aa32a6652f7bf71 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Fri, 15 Sep 2017 21:01:37 +0200 Subject: [PATCH] fix(dialog): directionality not injected into child components Since the `direction` option from the overlay only sets the `dir` attribute, it means that any components that depend on the `Directionality` service (e.g. `md-slider`) won't be able to pick it up. These changes add the proper direction to the custom dialog injector. --- src/lib/dialog/dialog.spec.ts | 12 +++++++++++- src/lib/dialog/dialog.ts | 6 ++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index dcd1489553d2..1ce22f92d319 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -22,6 +22,7 @@ import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Location} from '@angular/common'; import {SpyLocation} from '@angular/common/testing'; +import {Directionality} from '@angular/cdk/bidi'; import {MatDialogContainer} from './dialog-container'; import {OverlayContainer} from '@angular/cdk/overlay'; import {ESCAPE} from '@angular/cdk/keycodes'; @@ -433,6 +434,14 @@ describe('MatDialog', () => { expect(overlayPane.getAttribute('dir')).toBe('rtl'); }); + it('should inject the correct layout direction in the component instance', () => { + const dialogRef = dialog.open(PizzaMsg, { direction: 'rtl' }); + + viewContainerFixture.detectChanges(); + + expect(dialogRef.componentInstance.directionality.value).toBe('rtl'); + }); + it('should close all of the dialogs', async(() => { dialog.open(PizzaMsg); dialog.open(PizzaMsg); @@ -970,7 +979,8 @@ class ComponentWithTemplateRef { @Component({template: '

Pizza

'}) class PizzaMsg { constructor(public dialogRef: MatDialogRef, - public dialogInjector: Injector) {} + public dialogInjector: Injector, + public directionality: Directionality) {} } @Component({ diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index 7bbb1793cbb2..55cb9e08993d 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -28,12 +28,14 @@ import { TemplateRef, } from '@angular/core'; import {extendObject} from '@angular/material/core'; +import {Directionality} from '@angular/cdk/bidi'; import {Observable} from 'rxjs/Observable'; import {defer} from 'rxjs/observable/defer'; import {Subject} from 'rxjs/Subject'; import {MatDialogConfig} from './dialog-config'; import {MatDialogContainer} from './dialog-container'; import {MatDialogRef} from './dialog-ref'; +import {of as observableOf} from 'rxjs/observable/of'; export const MAT_DIALOG_DATA = new InjectionToken('MatDialogData'); @@ -277,6 +279,10 @@ export class MatDialog { injectionTokens.set(MatDialogRef, dialogRef); injectionTokens.set(MatDialogContainer, dialogContainer); injectionTokens.set(MAT_DIALOG_DATA, config.data); + injectionTokens.set(Directionality, { + value: config.direction, + change: observableOf() + }); return new PortalInjector(userInjector || this._injector, injectionTokens); }