fix snackbar RTL

Author: mmalerba

src/dev-app/dev-app/dev-app-directionality.ts

@@ -0,0 +1,20 @@
+import {Direction, Directionality} from '@angular/cdk/bidi';
+import {EventEmitter, Injectable, OnDestroy} from '@angular/core';
+
+@Injectable()
+export class DevAppDirectionality implements Directionality, OnDestroy {
+  readonly change = new EventEmitter<Direction>();
+
+  get value(): Direction {
+    return this._value;
+  }
+  set value(value: Direction) {
+    this._value = value;
+    this.change.next(value);
+  }
+  private _value: Direction = 'ltr';
+
+  ngOnDestroy() {
+    this.change.complete();
+  }
+}

src/dev-app/dev-app/dev-app-layout.html

@@ -37,15 +37,15 @@ <h1>Angular Material Demos</h1>
           <button mat-button (click)="rippleOptions.disabled = !rippleOptions.disabled">
             {{rippleOptions.disabled ? 'Enable' : 'Disable'}} ripples
           </button>
-          <button mat-button (click)="root.dir = (root.dir === 'rtl' ? 'ltr' : 'rtl')"
+          <button mat-button (click)="dir.value = (dir.value === 'rtl' ? 'ltr' : 'rtl')"
                   title="Toggle between RTL and LTR">
-            {{root.dir.toUpperCase()}}
+            {{dir.value.toUpperCase()}}
           </button>
         </div>
       </div>
     </mat-toolbar>
 
-    <div #root="dir" dir="ltr" class="demo-content mat-app-background">
+    <div [attr.dir]="dir.value" class="demo-content mat-app-background">
       <ng-content></ng-content>
     </div>
   </main>

src/dev-app/dev-app/dev-app-layout.ts

@@ -6,9 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Directionality} from '@angular/cdk/bidi';
 import {OverlayContainer} from '@angular/cdk/overlay';
-import {Component, ElementRef, ViewEncapsulation} from '@angular/core';
+import {ChangeDetectorRef, Component, ElementRef, Inject, ViewEncapsulation} from '@angular/core';
 import {DevAppRippleOptions} from '../ripple/ripple-options';
+import {DevAppDirectionality} from './dev-app-directionality';
 
 /** Root component for the dev-app demos. */
 @Component({
@@ -70,7 +72,10 @@ export class DevAppLayout {
 
   constructor(
       private _element: ElementRef<HTMLElement>, private _overlayContainer: OverlayContainer,
-      public rippleOptions: DevAppRippleOptions) {}
+      public rippleOptions: DevAppRippleOptions,
+      @Inject(Directionality) public dir: DevAppDirectionality, cdr: ChangeDetectorRef) {
+    dir.change.subscribe(() => cdr.markForCheck());
+  }
 
   toggleFullscreen() {
     // Cast to `any`, because the typings don't include the browser-prefixed methods.

src/dev-app/main-module.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Directionality} from '@angular/cdk/bidi';
 import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
 import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
@@ -14,6 +15,7 @@ import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
 import {DevAppComponent} from './dev-app';
+import {DevAppDirectionality} from './dev-app/dev-app-directionality';
 import {DevAppModule} from './dev-app/dev-app-module';
 import {DEV_APP_ROUTES} from './dev-app/routes';
 import {DevAppRippleOptions} from './ripple/ripple-options';
@@ -32,6 +34,7 @@ import {DevAppRippleOptions} from './ripple/ripple-options';
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
     {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: DevAppRippleOptions},
+    {provide: Directionality, useClass: DevAppDirectionality},
   ],
   bootstrap: [DevAppComponent],
 })

src/dev-app/snack-bar/snack-bar-demo.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Dir} from '@angular/cdk/bidi';
+import {Directionality} from '@angular/cdk/bidi';
 import {Component, TemplateRef, ViewChild} from '@angular/core';
 import {
   MatSnackBar,
@@ -33,8 +33,7 @@ export class SnackBarDemo {
   horizontalPosition: MatSnackBarHorizontalPosition = 'center';
   verticalPosition: MatSnackBarVerticalPosition = 'bottom';
 
-  constructor(public snackBar: MatSnackBar, private dir: Dir) {
-  }
+  constructor(public snackBar: MatSnackBar, private dir: Directionality) {}
 
   open() {
     const config = this._createConfig();