fix(bidi): make dir and changes readonly (#5645)

Author: jelbourn

src/cdk/bidi/dir.ts

@@ -8,7 +8,6 @@
 
 import {
   Directive,
-  HostBinding,
   Output,
   Input,
   EventEmitter
@@ -23,11 +22,9 @@ import {Direction, Directionality} from './directionality';
  */
 @Directive({
   selector: '[dir]',
-  // TODO(hansl): maybe `$implicit` isn't the best option here, but for now that's the best we got.
-  exportAs: '$implicit',
-  providers: [
-    {provide: Directionality, useExisting: Dir}
-  ]
+  providers: [{provide: Directionality, useExisting: Dir}],
+  host: {'[dir]': 'dir'},
+  exportAs: 'dir',
 })
 export class Dir implements Directionality {
   /** Layout direction of the element. */
@@ -40,7 +37,6 @@ export class Dir implements Directionality {
   @Output('dirChange') change = new EventEmitter<void>();
 
   /** @docs-private */
-  @HostBinding('attr.dir')
   @Input('dir')
   get dir(): Direction {
     return this._dir;
@@ -56,7 +52,6 @@ export class Dir implements Directionality {
 
   /** Current layout direction of the element. */
   get value(): Direction { return this.dir; }
-  set value(v: Direction) { this.dir = v; }
 
   /** Initialize once default value has been set. */
   ngAfterContentInit() {

src/cdk/bidi/directionality.ts

@@ -37,8 +37,8 @@ export const DIR_DOCUMENT = new InjectionToken<Document>('md-dir-doc');
  */
 @Injectable()
 export class Directionality {
-  value: Direction = 'ltr';
-  change = new EventEmitter<void>();
+  readonly value: Direction = 'ltr';
+  readonly change = new EventEmitter<void>();
 
   constructor(@Optional() @Inject(DIR_DOCUMENT) _document?: any) {
     if (_document) {

src/demo-app/demo-app/demo-app.html

@@ -40,7 +40,7 @@ <h1>Angular Material Demos</h1>
       </div>
     </md-toolbar>
 
-    <div #root="$implicit" dir="ltr" class="demo-content" [ngSwitch]="changeDetectionStrategy">
+    <div #root="dir" dir="ltr" class="demo-content" [ngSwitch]="changeDetectionStrategy">
       <div *ngSwitchDefault>
         <router-outlet></router-outlet>
       </div>

src/lib/tabs/tab-header.spec.ts

@@ -210,10 +210,10 @@ describe('MdTabHeader', () => {
       beforeEach(() => {
         dir = 'rtl';
         fixture = TestBed.createComponent(SimpleTabHeaderApp);
-        fixture.detectChanges();
-
         appComponent = fixture.componentInstance;
         appComponent.dir = 'rtl';
+
+        fixture.detectChanges();
       });
 
       it('should scroll to show the focused tab label', () => {