diff --git a/src/cdk/bidi/dir.ts b/src/cdk/bidi/dir.ts
index b25d6418b1ad..31bf0c489f1f 100644
--- a/src/cdk/bidi/dir.ts
+++ b/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() {
diff --git a/src/cdk/bidi/directionality.ts b/src/cdk/bidi/directionality.ts
index c0c4be344e9a..90cd0eaed2a4 100644
--- a/src/cdk/bidi/directionality.ts
+++ b/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) {
diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html
index 181cbca273c3..96d76215bd72 100644
--- a/src/demo-app/demo-app/demo-app.html
+++ b/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>
diff --git a/src/lib/tabs/tab-header.spec.ts b/src/lib/tabs/tab-header.spec.ts
index 1d39fc749a21..c7881a543644 100644
--- a/src/lib/tabs/tab-header.spec.ts
+++ b/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', () => {