<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Component - ElementRef</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>
import {Component, ElementRef} from '@angular/core';
@Component({
selector: 'app',
template: `
<h1>My App</h1>
<pre style="background: #eee; padding: 1rem; border-radius: 3px; overflow: auto;">
<code>{{ node }}</code>
</pre>
`
})
export class App {
node: string;
constructor(private elementRef: ElementRef) {
}
ngAfterContentInit() {
const tmp = document.createElement('div');
const el = this.elementRef.nativeElement.cloneNode(true);
tmp.appendChild(el);
this.node = tmp.innerHTML;
}
}
import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app.component.ts';
bootstrap(App);
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,
'@angular/http': 'npmcdn:@angular/http@'+angularVersion,
'immutable': 'npmcdn:immutable@3.8.1',
'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'
}
}
});