Angular 2 Custom Event Bubble Test

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  <p>Commenting out line 31 of container.ts means that the state 1 box is not updated - HostListener for the custom event does not receive the event. Host listener for DOM events are bubbled up but not custom events. This is fine for default behaviour but should be customisable based on individual needs.</p>
  <p>If you want to have truly 'dumb' components then you should be able to have them do nothing but raise events.</p>
  </body>

</html>

/* Styles go here */

### Angular2 Starter Plunker - Typescript - RC.0

A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src",
    '@angular': 'https://npmcdn.com/@angular',
    'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    '@angular/core': {
      main: 'core.umd.js',
      defaultExtension: 'js'
    },
    '@angular/compiler': {
      main: 'compiler.umd.js',
      defaultExtension: 'js'
    },
    '@angular/common': {
      main: 'common.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser-dynamic': {
      main: 'platform-browser-dynamic.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser': {
      main: 'platform-browser.umd.js',
      defaultExtension: 'js'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';

bootstrap(App, [])
  .catch(err => console.error(err));

//our root app component
import {Component} from '@angular/core'
import {Container} from './container.ts'
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <my-container></my-container>
    </div>
  `,
  directives: [Container]
})
export class App {
  constructor() {
    this.name = 'Angular 2 Custom Event Bubble Test'
  }
}

//our root app component
import {Component, HostListener, ViewChild} from '@angular/core'
import {ChildComponent} from './childcomponent.ts'

@Component({
  selector: 'my-container',
  providers: [],
  template: `
    <div style="border: 1px solid #000; margin: 10px; padding: 10px;">
    <h1>Container</h1>
    <input [(ngModel)]="state1" />
    <input [(ngModel)]="state2" />
    <div style="border: 1px solid #000; margin: 10px; padding: 10px;">
    <my-childcomponent>
    </my-childcomponent>
    </div>
    </div>
  `,
  directives: [ChildComponent]
})
export class Container {
  constructor() {
    this.state1='initial container state 1';
    this.state2='initial container state 2';
  }
  
  @ViewChild(ChildComponent)
  childComponent: ChildComponent;
  
  ngAfterViewInit() {
    this.childComponent.customEvent.subscribe(s => this.log2(s));
  }
  
  @HostListener('customEvent', ['$event']) 
  log1(e) {
    this.state1 = e;
    console.log('From Host Listener',e);
  }
  
  log2(e) {
    this.state1 = e;
    console.log('From subscription',e);
  }
  
  @HostListener('click', ['$event'])
  log3(e) {
    this.state2 = e.type;
    console.log('Child Native Click Event',e);
  }
}

//our root app component
import {Component, HostListener, Output, EventEmitter} from '@angular/core'

@Component({
  selector: 'my-childcomponent',
  providers: [],
  template: `
    <h1>Child Component</h1>
    <button>Click me!</button>
    <input [(ngModel)]="state" />
  `,
  directives: [ChildComponent]
})
export class ChildComponent {
  constructor() {
    this.state = 'initial child state';
  }
  @HostListener('click', ['$event']) log(e) {
    this.state = 'clicked';
    this.customEvent.emit('Child component clicked');
    console.log('Child Component Native Event',e);
  }
  
   @Output() customEvent: EventEmitter<any> = new EventEmitter();
}