Angular 2 Components - Projection

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Components - Projection</title>
    <script src="https://npmcdn.com/systemjs@0.19.6/dist/system.src.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="system.config.js"></script>
  </head>
  <body>
    <app>Loading...</app>
    
    <script>
      System.import('app');
    </script>
  </body>

</html>

var angularVersion = '2.0.0-rc.1';

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

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

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

System.config({
  packageConfigPaths: [
    "npmcdn:@*/*/package.json"
  ],
  
  map: {
    '@angular/core': 'npmcdn:@angular/core@'+angularVersion,
    '@angular/compiler': 'npmcdn:@angular/compiler@'+angularVersion,
    '@angular/common': 'npmcdn:@angular/common@'+angularVersion,
    '@angular/platform-browser': 'npmcdn:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'npmcdn:@angular/platform-browser-dynamic@'+angularVersion,
    'rxjs': 'npmcdn:rxjs@5.0.0-beta.6',
    'zone.js': 'npmcdn:zone.js@0.6.12',
    'reflect-metadata': 'npmcdn:reflect-metadata@0.1.3',
    "crypto": "@empty"
  },
  
  packages: {
    'app': {
      defaultExtension: 'ts',
      main: './index.ts'
    }
  }
});

import { bootstrap } from '@angular/platform-browser-dynamic';
import { App } from './app.component.ts';


bootstrap(App);

import {Component} from '@angular/core';
import {ChildSelect} from './child-select.component';
import {Child} from './child.component';

@Component({
	selector: 'app',
	template: `
    <div style="border: 2px solid black; padding: 1rem;">
      <h4>App Component</h4>
	    <child>
	      <p>My <i>projected</i> content.</p>
	      <p>
	        <b>Count:</b> {{ count }} <br/>
	        <b>Child Count:</b> {{ childCount || 'N/A' }}
	     </p>
	    </child>
	    <child-select>
	      <section>Section Content</section>
	      <div class="class-select">
	        div with .class-select
	      </div>
	      <footer>Footer Content</footer>
	      <header>Header Content</header>
	    </child-select>
	  </div>
	`,
	directives: [Child, ChildSelect]
})
export class App {
  count: number = 12;
  
}

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

@Component({
  selector: 'child-select',
  template: `
    <div style="border: 2px solid red; padding: 1rem; margin: 2px;">
	    <h4>Child Component with Select</h4>
	    <div style="border: 2px solid orange; padding: 1rem; margin: 2px">
	      <ng-content select="header"></ng-content>
	    </div>
	    <div style="border: 2px solid green; padding: 1rem; margin: 2px">
	      <ng-content select="section"></ng-content>
	    </div>
	    <div style="border: 2px solid pink; padding: 1rem; margin: 2px">
	      <ng-content select=".class-select"></ng-content>
	    </div>
	    <div style="border: 2px solid purple; padding: 1rem; margin: 2px">
	      <ng-content select="footer"></ng-content>
	    </div>
    </div>
  `
})
export class ChildSelect {
  
}

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

@Component({
	selector: 'child',
	template: `
	  <div style="border: 2px solid blue; padding: 1rem; margin: 2px;">
	    <h4>Child Component</h4>
	    <ng-content></ng-content>
    </div>
	`
})
export class Child {
  childCount: number = 24;
}