HostMetadata

<!DOCTYPE html>
<html>

<head>
  <title>angular2 playground</title>
  <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 src="https://code.angularjs.org/2.0.0-alpha.46/angular2.min.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>

</head>

<body>
  <app></app>
</body>

</html>

### Angular2 Starter Plunker - Typescript

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

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true,
    experimentalDecorators: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

import {View, Component, bootstrap, Directive, Host, Optional} from 'angular2/angular2'

class OtherService {}
class HostService {}
class Engine () {
  
}
@Directive({
  selector: 'child-directive'
})
class ChildDirective {
  constructor(@Optional() @Host() os:OtherService, @Optional() @Host() hs:HostService, public engine?: Engine){
    console.log("os is null", os);
    console.log("hs is NOT null", hs);
  }
}

@Component({
  selector: 'parent-cmp',
  providers: [HostService]
})
@View({
  template: `
    Dir: <child-directive></child-directive>
  `,
  directives: [ChildDirective]
})
class ParentCmp {
}

@Component({
  selector: 'app',
  providers: [OtherService]
})
@View({
  template: `
    Parent: <parent-cmp></parent-cmp>
  `,
  directives: [ParentCmp]
})
class App {
}

bootstrap(App);