angular dialog stacking

app.component.html

<div style="padding: 7px">
  <button md-raised-button (click)="open = true">Open Dialog</button>
  
  <dialog-cmp [open]="open">
    
    <md-input-container>
      <input mdInput placeholder="Whatever" [formControl]="form.get('whatever')">
    </md-input-container>
  
    <md-input-container>
      <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="form.get('state')">
    </md-input-container>
    
    <md-autocomplete #auto="mdAutocomplete">
      <md-option *ngFor="let state of states" [value]="state">
        {{ state }}
      </md-option>
    </md-autocomplete>
    
    <button type="button" md-raised-button (click)="closeDialog()">Submit</button>
    
  </dialog-cmp>  
  <!-- Optional Version Output -->
  <hr>

  <p *ngIf="version | async" style="color: #333">
      Using Angular Material 
    (SHA {{ (version | async)?.commit.message.split(" ")[0] }}) from 
    {{ (version | async)?.commit.author.date | date: 'short' }}
  </p>

</div>

<!--
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
-->

app.component.ts

import {Component, ViewChild, Input, ViewEncapsulation} from '@angular/core';
import {Http} from '@angular/http'
import {FormGroup, FormControl} from '@angular/forms';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {MdDialog} from '@angular/material';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  form: FormGroup;
  filteredStates: any;
  dialog;
  open = false;
  
  states = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'Florida',
    'Georgia',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New Mexico',
    'New York',
    'North Carolina',
    'North Dakota',
    'Ohio',
    'Oklahoma',
    'Oregon',
    'Pennsylvania',
    'Rhode Island',
    'South Carolina',
    'South Dakota',
    'Tennessee',
    'Texas',
    'Utah',
    'Vermont',
    'Virginia',
    'Washington',
    'West Virginia',
    'Wisconsin',
    'Wyoming',
  ];

  
  private version: any; 
  
  constructor(http: Http, private _dialog: MdDialog) {
    this.form = new FormGroup({
      state: new FormControl(),
      whatever: new FormControl()
    });
    this.filteredStates = this.form.get('state').valueChanges
        .startWith(null)
        .map(name => this.filterStates(name));
        
    // Display the currently used Material 2 version.
    this.version = http
      .get('https://api.github.com/repos/angular/material2-builds/commits/HEAD')
      .map(res => res.json())
  }
  
  filterStates(val: string) {
    return val ? this.states.filter((s) => new RegExp(val, 'gi').test(s)) : this.states;
  }
  
  openDialog() {
    this.open = true;
  }
  
  closeDialog() {
    this.open = false;
    this.form.reset();
  }
}


@Component({
  selector: 'dialog-cmp',
  encapsulation: ViewEncapsulation.None,
  template: `
    <template #tpl>
      <ng-content></ng-content>
    </template>
  
  `
})
export class DialogComponent {
  dialog;
  subscription;
  
  @ViewChild('tpl')
  tpl;
  

  @Input()
  set open(v: boolean) {
    if (v === true) {
      setTimeout(() => {
        this.dialog = this._dialog.open(this.tpl, {
          disableClose: true
        });

        this.subscription = this.dialog.afterClosed().subscribe(() => {
          this.close.emit();
        });
      });
    } else if (this.dialog) {
      this.dialog.close();
      this.subscription.unsubscribe();
    }
  }

  constructor(
    private _dialog: MdDialog
  ) { }
  
}

/*
 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
 */

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Material Plunker</title>
    
    <!-- Load common libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.1.1/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.41/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.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 2 stylesheet -->
    <link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
    <style>body { font-family: Roboto, Arial, sans-serif; }</style>

  </head>

  <body>
    <material-app>Loading the Angular 2 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
-->

main.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import {AppComponent,DialogComponent} from './app.component';
import {MaterialModule} from '@angular/material';

@NgModule({

  imports: [
    BrowserModule,
    CommonModule,
    ReactiveFormsModule,
    MaterialModule.forRoot(),
  ],

  declarations: [AppComponent,DialogComponent],
  bootstrap: [AppComponent],
  providers: []
})
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
 */

systemjs.config.js

/** 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/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-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
 */