Angular 2 Material Design Lite (angular2-mdl) Dialog with Event emitter demo

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Material Design Lite (angular2-mdl) Plunker</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.0.2/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.6.23/zone.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>


    <script src="systemjs.config.js"></script>

    <script>
      System.import('main.ts')
        .catch(console.error.bind(console));
    </script>
    
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.light_blue-amber.min.css" />
    
  </head>

  <body>
    <demo-app>Loading...</demo-app>
    <dialog-outlet></dialog-outlet>
  </body>

</html>

<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
        <mdl-layout-header>
          <mdl-layout-header-row>
            <mdl-layout-title>Title</mdl-layout-title>
            <mdl-layout-spacer></mdl-layout-spacer>
            <!-- Navigation. We hide it in small screens. -->
            <nav class="mdl-navigation">
              <a class="mdl-navigation__link">Link</a>
            </nav>
          </mdl-layout-header-row>
        </mdl-layout-header>
        <mdl-layout-drawer>
          <mdl-layout-title>Title</mdl-layout-title>
          <nav class="mdl-navigation">
            <a class="mdl-navigation__link">Link</a>
          </nav>
        </mdl-layout-drawer>
        <mdl-layout-content class="demo-content">

       <button 
          mdl-button 
          mdl-button-type="raised" 
          mdl-colored="primary"
          mdl-ripple
          (click)="testDialog.show()">Open dialog</button>
        
        Counter: {{counter}}

        <mdl-dialog #testDialog>
          <dialog-content [dialog]="testDialog" (emitter)="onEmitting($event)"></dialog-content>
       </mdl-dialog>
 

        </mdl-layout-content>
      </mdl-layout>

import { Component } from '@angular/core';

@Component({
  selector: 'demo-app',
  templateUrl: 'app.component.html',
  styles: [
    `
    .demo-content {
       padding: 12px;
    }
    `
  ]
})
export class AppComponent {
    
  public checkbox1 = true;
  public radioOption = '1';
  
  public counter = 0;
  
  onEmitting(justANumber){
    this.counter += justANumber;
  }
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MdlModule } from 'angular2-mdl';
import { AppComponent } from './app.component';
import { DialogContentComponent } from './dialog-content.component';

@NgModule({

  imports: [
    BrowserModule,
    FormsModule,
    MdlModule
  ],

  declarations: [AppComponent, DialogContentComponent],
  bootstrap: [AppComponent],
  providers: []
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Demo Plunkr for angular2-mdl.
for stackoverflow question: http://stackoverflow.com/questions/39913676/eventemitter-in-custom-dialog-component


System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    }
  }
});


var map = {
  '@angular': 'https://unpkg.com/@angular',
  'angular2-mdl': 'https://unpkg.com/angular2-mdl@latest/bundle/angular2-mdl.js',
  'rxjs': 'https://unpkg.com/rxjs',
  'main': 'main.js'
};

var packages = {

}

System.config({
  map: map, 
  packages: packages
});

<p>
  <button 
      mdl-button  
      mdl-button-type="raised" 
      mdl-colored="primary" 
      mdl-ripple
      (click)="fireEvent()">Fire event</button>
  
  <button 
      mdl-button 
      mdl-button-type="raised" 
      mdl-colored="accent"
      mdl-ripple
      (click)="closeDialog()">Close dialog </button>
</p>

import { Component, Output, EventEmitter, Input } from '@angular/core';
import { MdlDialogComponent } from 'angular2-mdl';

@Component({
  selector: 'dialog-content',
  templateUrl: 'dialog-content.component.html'
})
export class DialogContentComponent {
  
  @Output() emitter = new EventEmitter();
  @Input() dialog: MdlDialogComponent;
  
  // or this way: constructor(private dialog: MdlDialogComponent){}
  
  fireEvent() {
    this.emitter.emit(1);
  }
  
  closeDialog() {
    this.dialog.close();
  }
}