johnlindquist · March 31, 2016 21:18
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>RxJSCraft</title>
    <script src="https://npmcdn.com/angular2/bundles/angular2-polyfills.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/system.js"></script>
    <script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script>
    </head>
 <body>

 <app></app>


 <script>
    SystemJS.config({
        transpiler: "typescript",
        typescriptOptions: {
            emitDecoratorMetadata: true
        },
        map:{
            rxjs: 'https://npmcdn.com/rxjs',
            angular2: 'https://npmcdn.com/angular2'
        },
        packages: {
            "src": {
                "main": "main",
                "defaultExtension": "ts"
            }
        }
    });
    System.import('src');
 </script>
 </body>
 </html>
diff --git a/src\app.ts b/src\app.ts
 import {Component, DynamicComponentLoader, ElementRef, Injector} from 'angular2/core'
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import 'rxjs/add/observable/fromPromise';
 import 'rxjs/add/observable/interval';
 import 'rxjs/add/operator/switchMap';


 @Component({
    selector: 'app',
    template: `
    <div>
      <button (click)="click$.next('person')">Add a Person</button>
      <button (click)="click$.next('car')">Add a Car</button>
      
      <div #loadTarget></div>
    </div>
  `
 })
 export class App {
    click$ = new Subject();

    constructor(
        private _loader:DynamicComponentLoader,
        private _ref:ElementRef,
        private injector:Injector
    ) {
        const loadComp = comp => Observable
            .fromPromise(
                this._loader.loadIntoLocation(
                    //the injector looks up the component by string
                    this.injector.get(comp),
                    this._ref,
                    'loadTarget'
                )
            );

        this.click$
            //pass the 'string' from the click to the loadComp
            .switchMap(compName => loadComp(compName))
            .subscribe(comp => comp.instance.id = Math.random());
    }
 }
diff --git a/src\car.ts b/src\car.ts
 import {Component, Input} from 'angular2/core';

 @Component({
    selector: 'car',
    template: `
        <style>div{border: 2px dashed red}</style>
        <div>Car's id: {{id}}</div>
    `,
 })
 export class Car {
    @Input() id;
 }
diff --git a/src\main.ts b/src\main.ts
 import {bootstrap} from 'angular2/platform/browser';
 import {provide} from 'angular2/core';
 import {Person} from './person';
 import {Car} from './car';
 import {App} from './app';

 bootstrap(App, [
    provide('person', {useValue: Person}),
    provide('car', {useValue: Car})
 ])
    .catch(console.log.bind(console));
diff --git a/src\person.ts b/src\person.ts
 import {Component, Input} from 'angular2/core';

 @Component({
    selector: 'person',
    template: `
        <style>div{border: 2px solid blue}</style>
        <div>My id: {{id}}</div>
    `,
 })
 export class Person {
    @Input() id;
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>RxJSCraft</title>
	<script src="https://npmcdn.com/angular2/bundles/angular2-polyfills.js"></script>
	<script src="https://npmcdn.com/[email protected]/dist/system.js"></script>
	<script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script>
	</head>
	<body>

	<app></app>


	<script>
	SystemJS.config({
	transpiler: "typescript",
	typescriptOptions: {
	emitDecoratorMetadata: true
	},
	map:{
	rxjs: 'https://npmcdn.com/rxjs',
	angular2: 'https://npmcdn.com/angular2'
	},
	packages: {
	"src": {
	"main": "main",
	"defaultExtension": "ts"
	}
	}
	});
	System.import('src');
	</script>
	</body>
	</html>
	import {Component, DynamicComponentLoader, ElementRef, Injector} from 'angular2/core'
	import {Observable} from 'rxjs/Observable';
	import {Subject} from 'rxjs/Subject';
	import 'rxjs/add/observable/fromPromise';
	import 'rxjs/add/observable/interval';
	import 'rxjs/add/operator/switchMap';


	@Component({
	selector: 'app',
	template: `
	<div>
	<button (click)="click$.next('person')">Add a Person</button>
	<button (click)="click$.next('car')">Add a Car</button>

	<div #loadTarget></div>
	</div>
	`
	})
	export class App {
	click$ = new Subject();

	constructor(
	private _loader:DynamicComponentLoader,
	private _ref:ElementRef,
	private injector:Injector
	) {
	const loadComp = comp => Observable
	.fromPromise(
	this._loader.loadIntoLocation(
	//the injector looks up the component by string
	this.injector.get(comp),
	this._ref,
	'loadTarget'
	)
	);

	this.click$
	//pass the 'string' from the click to the loadComp
	.switchMap(compName => loadComp(compName))
	.subscribe(comp => comp.instance.id = Math.random());
	}
	}
	import {Component, Input} from 'angular2/core';

	@Component({
	selector: 'car',
	template: `
	<style>div{border: 2px dashed red}</style>
	<div>Car's id: {{id}}</div>
	`,
	})
	export class Car {
	@Input() id;
	}
	import {bootstrap} from 'angular2/platform/browser';
	import {provide} from 'angular2/core';
	import {Person} from './person';
	import {Car} from './car';
	import {App} from './app';

	bootstrap(App, [
	provide('person', {useValue: Person}),
	provide('car', {useValue: Car})
	])
	.catch(console.log.bind(console));
	import {Component, Input} from 'angular2/core';

	@Component({
	selector: 'person',
	template: `
	<style>div{border: 2px solid blue}</style>
	<div>My id: {{id}}</div>
	`,
	})
	export class Person {
	@Input() id;
	}