http://stackoverflow.com/questions/42355858/input-file-onchange-event-not-firing

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2</title>
    <script src="https://unpkg.com/systemjs@0.19.41/dist/system.src.js"></script>
    <script src="https://unpkg.com/typescript@2.0.10"></script>
    <script src="system.config.js"></script>
    <link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
  </head>
  <body>
    <app>Loading...</app>
    
    <script>
      System.import('main.ts');
    </script>
  </body>

</html>

import { Component, ViewChild, Renderer, ElementRef} from '@angular/core';

@Component({
  selector: 'app',
  template: `
<main id="container" fxLayout="row">
  <md-card fxFlex="60%" fxFlex.xs="98%" fxFlex.sm="90%">
    <md-card-header>
      <div md-card-avatar class="example-header-image"></div>
      <md-card-title><h2>Contact</h2></md-card-title>
    </md-card-header>
    <md-card-content>
      <form>
        <div fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxLayoutAlign="space-around">
          <div fxFlex="1 1 50%" fxLayout="column" >
            <div fxFlex="1 1 auto" fxLayout="row" fxLayoutAlign="space-between">
              <md-input-container fxFlex="30%">
                <input mdInput placeholder="Voornaam">
              </md-input-container>
              <md-input-container fxFlex="30%">
                <input mdInput placeholder="Tussenvoegsel">
              </md-input-container>
              <md-input-container fxFlex="30%">
                <input mdInput placeholder="Achternaam">
              </md-input-container>
            </div>
            <div fxFlex="auto" fxLayoutAlign="space-between" fxLayoutGap="30px">
              <md-input-container fxFlex="45%">
                <input mdInput placeholder="Email">
              </md-input-container>
              <md-input-container fxFlex="45%">
                <input mdInput placeholder="Onderwerp">
              </md-input-container>
            </div>
          </div>
          <div fxFlex="40%">
            <md-input-container fxFlex="100%" fxLayoutAlign="stretch">
              <textarea mdInput placeholder="Bericht" id="message"></textarea>
            </md-input-container>
          </div>
        </div>
        <div fxFlex="auto" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
          <md-slide-toggle [color]="color" class="margin" fxFlexAlign="center">
            Stuur mij een kopie
          </md-slide-toggle>
          <button md-raised-button color="accent" fxFlexAlign="center" type="submit">
            Verstuur
          </button>
        </div>
      </form>
    </md-card-content>
  </md-card>
</main>
  `
})
export class AppComponent {
  constructor() {

  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';

import { AppComponent } from './app.component.ts';

import 'hammerjs';

@NgModule({
  imports: [
    BrowserModule,
    MaterialModule,
    FlexLayoutModule.forRoot()
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
  
}

var angularVersion = '2.4.9';

System.config({
  baseUrl: '/',
  paths: {
    'unpkg:*': 'https://unpkg.com/*'
  }
});

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },

  meta: {
    '*': {
      deps: [ 'zone.js', 'reflect-metadata' ]
    }
  }
});

System.config({
  packageConfigPaths: [
    "unpkg:@*/*/package.json"
  ],
  
  map: {
    '@angular/core': 'unpkg:@angular/core@'+angularVersion,
    '@angular/compiler': 'unpkg:@angular/compiler@'+angularVersion,
    '@angular/common': 'unpkg:@angular/common@'+angularVersion,
    '@angular/platform-browser': 'unpkg:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'unpkg:@angular/platform-browser-dynamic@'+angularVersion,
    '@angular/http': 'unpkg:@angular/http@'+angularVersion,
    '@angular/forms': 'unpkg:@angular/forms@'+angularVersion,
    
    
    '@angular/material': 'unpkg:@angular/material@2.0.0-beta.2',
    '@angular/flex-layout': 'unpkg:@angular/flex-layout@2.0.0-rc.1',
    
    'hammerjs': 'unpkg:hammerjs@2.0.8',
    
    'rxjs': 'unpkg:rxjs@5.0.3',
    'zone.js': 'unpkg:zone.js@0.7.2',
    'reflect-metadata': 'unpkg:reflect-metadata@0.1.9'
  },
  
  packages: {
    'app': {
      defaultExtension: 'ts',
      main: './index.ts'
    }
  }
});

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { AppModule } from './app/app.module'

platformBrowserDynamic().bootstrapModule(AppModule)