fix(sidenav): treat opened as boolean attribute. (#444)

Fixes #300.

Author: devversion

src/components/sidenav/sidenav.spec.ts

@@ -238,6 +238,45 @@ export function main() {
         }).toThrow();
       }));
     });
+
+    describe('attributes', () => {
+
+      it('should correctly parse opened="false"', fakeAsyncAdaptor(() => {
+        let newBuilder = builder.overrideTemplate(BasicTestApp, `
+          <md-sidenav-layout>
+            <md-sidenav #sidenav mode="side" opened="false">
+              Closed Sidenav.
+            </md-sidenav>
+          </md-sidenav-layout>`);
+
+        let fixture = createFixture(BasicTestApp, newBuilder, template, style);
+        fixture.detectChanges();
+
+        let sidenavEl = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
+
+        expect(sidenavEl.classList).toContain('md-sidenav-closed');
+        expect(sidenavEl.classList).not.toContain('md-sidenav-opened');
+      }));
+
+      it('should correctly parse opened="true"', fakeAsyncAdaptor(() => {
+        let newBuilder = builder.overrideTemplate(BasicTestApp, `
+          <md-sidenav-layout>
+            <md-sidenav #sidenav mode="side" opened="true">
+              Closed Sidenav.
+            </md-sidenav>
+          </md-sidenav-layout>`);
+
+        let fixture = createFixture(BasicTestApp, newBuilder, template, style);
+        fixture.detectChanges();
+
+        let sidenavEl = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
+
+        expect(sidenavEl.classList).not.toContain('md-sidenav-closed');
+        expect(sidenavEl.classList).toContain('md-sidenav-opened');
+      }));
+
+    });
+
   });
 }
 

src/components/sidenav/sidenav.ts

@@ -18,6 +18,7 @@ import {
 import {Dir} from '../../core/rtl/dir';
 import {PromiseCompleter} from '../../core/async/promise-completer';
 import {MdError} from '../../core/errors/error';
+import { BooleanFieldValue } from '../../core/annotations/field-value';
 
 
 /**
@@ -50,7 +51,7 @@ export class MdSidenav {
   @Input() mode: 'over' | 'push' | 'side' = 'over';
 
   /** Whether the sidenav is opened. */
-  @Input('opened') private _opened: boolean = false;
+  @Input('opened') @BooleanFieldValue() private _opened: boolean = false;
 
   /** Event emitted when the sidenav is being opened. Use this to synchronize animations. */
   @Output('open-start') onOpenStart = new EventEmitter<void>();