<!DOCTYPE html>
<html>
<head>
<title>Angular 2</title>
<script src="https://unpkg.com/systemjs@0.19.41/dist/system.src.js"></script>
<script src="https://unpkg.com/typescript@2.0.10"></script>
<script src="system.config.js"></script>
<link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
</head>
<body>
<app>Loading...</app>
<script>
System.import('main.ts');
</script>
</body>
</html>
import { Component, ViewChild, Renderer, ElementRef} from '@angular/core';
@Component({
selector: 'app',
template: `
<iframe src="https://www.w3schools.com" #w3schools></iframe>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('w3schools') iframe: ElementRef;
constructor() {
}
ngAfterViewInit() {
const win = (<HTMLIFrameElement> this.iframe).nativeElement.contentWindow;
console.log(win);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component.ts';
import 'hammerjs';
@NgModule({
imports: [
BrowserModule,
MaterialModule,
FlexLayoutModule.forRoot()
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
var angularVersion = '2.4.9';
System.config({
baseUrl: '/',
paths: {
'unpkg:*': 'https://unpkg.com/*'
}
});
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
meta: {
'*': {
deps: [ 'zone.js', 'reflect-metadata' ]
}
}
});
System.config({
packageConfigPaths: [
"unpkg:@*/*/package.json"
],
map: {
'@angular/core': 'unpkg:@angular/core@'+angularVersion,
'@angular/compiler': 'unpkg:@angular/compiler@'+angularVersion,
'@angular/common': 'unpkg:@angular/common@'+angularVersion,
'@angular/platform-browser': 'unpkg:@angular/platform-browser@'+angularVersion,
'@angular/platform-browser-dynamic': 'unpkg:@angular/platform-browser-dynamic@'+angularVersion,
'@angular/http': 'unpkg:@angular/http@'+angularVersion,
'@angular/forms': 'unpkg:@angular/forms@'+angularVersion,
'@angular/material': 'unpkg:@angular/material@2.0.0-beta.2',
'@angular/flex-layout': 'unpkg:@angular/flex-layout@2.0.0-rc.1',
'hammerjs': 'unpkg:hammerjs@2.0.8',
'rxjs': 'unpkg:rxjs@5.0.3',
'zone.js': 'unpkg:zone.js@0.7.2',
'reflect-metadata': 'unpkg:reflect-metadata@0.1.9'
},
packages: {
'app': {
defaultExtension: 'ts',
main: './index.ts'
}
}
});
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { AppModule } from './app/app.module'
platformBrowserDynamic().bootstrapModule(AppModule)