feat(examples): focus input when sidenav is shown

 - re-export the outputs from MdBackdrop so that Angular knows about them.

examples/components/sidenav/basic_usage.html

@@ -49,15 +49,15 @@ <h1 class="md-toolbar-tools">Sidenav Left</h1>
 
     </md-content>
 
-    <md-sidenav name="right" align="right" layout="column">
+    <md-sidenav name="right" align="right" layout="column" (onShown)="input.focus()">
       <md-toolbar class="md-theme-light">
         <h1 class="md-toolbar-tools">Sidenav Right</h1>
       </md-toolbar>
       <md-content layout-padding>
         <form>
           <md-input-container class="md-block">
             <label for="testInput">Test input</label>
-            <input type="text" id="testInput" md-input
+            <input type="text" id="testInput" md-input #input
                    [(value)]="data" md-autofocus>
           </md-input-container>
         </form>

ng2-material/components/sidenav/sidenav.ts

@@ -13,7 +13,9 @@ import {
   Optional,
   SkipSelf,
   Host,
-  ApplicationRef
+  ApplicationRef,
+  Output,
+  EventEmitter
 } from "angular2/core";
 import {MdBackdrop} from "../backdrop/backdrop";
 import {DOM} from "angular2/src/platform/dom/dom_adapter";
@@ -75,6 +77,14 @@ export class MdSidenav extends MdBackdrop implements OnInit, OnDestroy {
   @Input()
   name: string = 'default';
 
+  // TODO(jd): sucks that we have to re-export the outputs from a child class, but
+  // without this you cannot bind to the events in a template. :sob:
+  @Output() onHiding: EventEmitter<MdSidenav>;
+  @Output() onHidden: EventEmitter<MdSidenav>;
+  @Output() onShowing: EventEmitter<MdSidenav>;
+  @Output() onShown: EventEmitter<MdSidenav>;
+
+
   @Input()
   set align(value: string) {
     this._align = value === SidenavAlignment.RIGHT ? SidenavAlignment.RIGHT : SidenavAlignment.LEFT;