<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://npmcdn.com/zone.js@0.6.12"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
<script src="https://npmcdn.com/typescript@1.8.10/lib/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>
</body>
</html>
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
* Override at the last minute with global.filterSystemConfig (as plunkers do)
*/
(function(global) {
var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!
//map tells the System loader where to look for things
var map = {
'app': 'src', // 'dist',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
packageNames.forEach(function(pkgName) {
map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
});
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import {Component, ViewChild, Injector, Inject, DynamicComponentLoader} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {Http, HTTP_PROVIDERS} from '@angular/http';
import {Loader} from 'src/loader';
import {ComponentOne, ComponentTwo, ComponentThree} from 'src/components';
@Component({
selector: 'my-app',
template : `
<div>
<div style="border: 1px solid #C1C1C1; padding: 20px;">
<p>loadNextToLocation Loader area</p>
<div>
<button (click)="loadComponent(1)">Load Component 1</button>
<button (click)="loadComponent(2)">Load Component 2</button>
<button (click)="loadComponent(3)">Load Component 3</button>
</div><br/>
<loader [data]="data"></loader>
</div>
<br/>
<div style="border: 1px solid #C1C1C1; padding: 20px;">
<p>loadAsRoot Loader area</p>
<div id="rootElem"></div>
</div>
</div>
`,
directives: [Loader]
})
export class App {
data:any;
constructor(
@Inject(Injector) injector:Injector,
@Inject(DynamicComponentLoader) dynamicComponentLoader: DynamicComponentLoader) {
dynamicComponentLoader.loadAsRoot(ComponentThree, '#rootElem', injector);
}
loadComponent(num:number):void {
switch(num) {
case 1:
this.data = {component: ComponentOne, input: {name: "test"}};
break;
case 2:
this.data = {component: ComponentTwo, input: {value1: 7, value2: 13}};
break;
case 3:
this.data = {component: ComponentThree, input: {}};
break;
}
}
}
bootstrap(App, [...HTTP_PROVIDERS]).catch(err => console.error(err));
import {Directive, Input, Type} from '@angular/core';
import {ComponentRef, DynamicComponentLoader, ViewContainerRef} from '@angular/core';
@Directive({
selector: 'loader'
})
export class Loader extends Type {
@Input()
data:any;
private componentRef:ComponentRef<Type>;
constructor(private loader:DynamicComponentLoader,
private viewContainerRef: ViewContainerRef) {
super();
}
ngOnChanges() {
if (this.data) {
//Cleanup the old component
if (this.componentRef) {
this.componentRef.destroy();
}
this.loader.loadNextToLocation(this.data.component, this.viewContainerRef).then((ref:ComponentRef<Type>) => {
if (this.data.input) {
for (let key in this.data.input) {
ref.instance[key] = this.data.input[key];
}
}
this.componentRef = ref;
return ref;
});
}
}
}
import {Component, Type} from '@angular/core';
@Component({
'selector': 'component-one',
'template': `<div style="border: 1px solid #FF0000;">Component one content (data: {{name}})</div>`
})
export class ComponentOne {
name: string;
}
@Component({
'selector': 'component-two',
'template': '<div style="border: 1px solid #00FF00;">Component two content {{value1}} + {{value2}} = {{value1+value2}}</div>'
})
export class ComponentTwo {
value1: number;
value2: number;
}
@Component({
'selector': 'component-three',
'template': '<div style="border: 1px solid #0000FF;">Component three content</div>'
})
export class ComponentThree {
}