Angular Material Plunker Template

<!DOCTYPE html>
<html>
  <head>
    <title>Angular Material Plunker</title>
    
    <!-- Load common libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.1.6/typescript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.7.2/zone.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>


    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>

    <script>
      System
        .import('main.ts')
        .catch(console.error.bind(console));
    </script>
    
    <!-- Load the Angular Material stylesheet -->
    <link href="https://rawgit.com/angular/material2-builds/master/prebuilt-themes/indigo-pink.css" rel="stylesheet">
    <style>body { font-family: Roboto, Arial, sans-serif; margin: 0 }</style>

  </head>

  <body class="mat-app-background">
    <material-app>Loading the Angular Material App...</material-app>
  </body>

</html>

<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

import {Component, ViewChild} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {DrawerService} from './drawer_service';
import {Drawer} from './drawer.component';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  
  constructor(private drawerService: DrawerService) {
  }
  
  showNav() {
    this.drawerService.attach(Drawer);
  }
  
}

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */

<button type="button" (click)="showNav()">Click me</button>
<p>When this button is clicked the overlay is attached. Nav container with nav
is then attached to this overlay and nav opening is triggered.
To open the nav I'm listening for overlayRef.attachments().

/** Add Transpiler for Typescript */
System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    },
    'vendor': {
      defaultExtension: 'js'
    }
  }
});

System.config({
  map: {
    'main': 'main.js',
    
    // Angular specific mappings.
    '@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js',
    '@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js',
    '@angular/animations': "https://unpkg.com/@angular/animations/bundles/animations.umd.js",
    '@angular/animations/browser': 'https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js',
    '@angular/http': 'https://unpkg.com/@angular/http/bundles/http.umd.js',
    '@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js',
    '@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js',
    '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser/animations': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/material': 'https://rawgit.com/angular/material2-builds/master/bundles/material.umd.js',
    
    // Rxjs mapping
    'rxjs': 'https://unpkg.com/rxjs',
  },
  packages: {
    // Thirdparty barrels.
    'rxjs': { main: 'index' },
  }
});

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HttpModule} from '@angular/http';
import {AppComponent} from './app.component';
import {Drawer} from './drawer.component';
import {DrawerService} from './drawer_service';
import {MaterialModule} from '@angular/material';

@NgModule({

  imports: [
    BrowserModule,
    CommonModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],

  declarations: [AppComponent, Drawer],
  bootstrap: [AppComponent],
  entryComponents: [Drawer],
  
  providers: [DrawerService,]
})
export class PlunkerAppModule {}

platformBrowserDynamic().bootstrapModule(PlunkerAppModule);

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */

import { Component, OnInit,  ViewChild } from '@angular/core';
import {MdSidenav} from '@angular/material';
import { Observable } from 'rxjs/Observable';
import {DrawerService} from './drawer_service';
import 'rxjs/add/observable/fromPromise';

@Component({
  selector: 'drawer',
  templateUrl: 'drawer.component.html',
  styles: [`
    .drawer-container {
  width: 100vw;
  height: 100vh;
  background: transparent;
    }
  .drawer {
    width: 200px;
    height: 100%;
  }
  `],
})
export class Drawer implements OnInit {
  @ViewChild('nav') nav: MdSidenav;

  constructor(private drawerService: DrawerService) {
    
    this.drawerService.overlayRef.attachments()
        .switchMap(() => Observable.fromPromise(this.nav.open()))
        .subscribe();

  }

  closeDrawer() {
    Observable.fromPromise(this.nav.close())
        .map(() => this.drawerService.detachDrawer())
        .subscribe();
    ;
  }

<md-sidenav-container class="drawer-container">
  <md-sidenav align="end" #nav class="drawer">
    <div>This is a test</div>
    <button type="button" (click)="closeDrawer()">Close</button>
  </md-sidenav>
</md-sidenav-container>

import {Injectable} from '@angular/core';
import {MdSidenav} from '@angular/material';
import {ComponentPortal, Overlay, OverlayRef, OverlayState} from '@angular/material';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class DrawerService {
  overlayRef: OverlayRef;
  private drawerPortal: ComponentPortal<any>;

  constructor(private overlay: Overlay) {
    let config = new OverlayState();
    config.positionStrategy =
        this.overlay.position().global().top('0').left('0');
    this.overlayRef = this.overlay.create(config);
    
  }

  attach(component: any) {
    this.drawerPortal = new ComponentPortal(component);
    const n = this.overlayRef.attach(this.drawerPortal);
  }

  detachDrawer() {
    this.overlayRef.detach();
  }
}