<!DOCTYPE html>
<html>
<head>
<title>Angular playground</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<script src="https://code.angularjs.org/tools/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>
/* Styles go here */
iframe {
width: 100%;
min-height: 500px;
margin-top: 10%;
}
### Angular Starter Plunker - Typescript
A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: './src',
'@angular': 'https://unpkg.com/@angular',
'@angular/common': 'https://unpkg.com/@angular/common@2.3.1',
'@angular/core': 'https://unpkg.com/@angular/core@2.3.1',
'@angular/compiler': 'https://unpkg.com/@angular/compiler@2.3.1',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@2.3.1',
'@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser@2.3.1',
'rxjs': 'https://unpkg.com/rxjs@5.0.3',
'another-ng-youtube-player': 'https://unpkg.com/another-ng-youtube-player@0.0.3/bundles'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
'@angular/core': {
main: 'bundles/core.umd.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'bundles/compiler.umd.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'bundles/common.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'bundles/platform-browser-dynamic.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'bundles/platform-browser.umd.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'another-ng-youtube-player': {
main: 'another-ng-youtube-player.umd.js',
defaultExtension: 'js'
}
}
});
//main entry point
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { YoutubePlayerModule } from 'another-ng-youtube-player';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app';
@NgModule({
imports:[ BrowserModule, YoutubePlayerModule ],
declarations: [ AppComponent, ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
//our root app component
import {Component} from '@angular/core'
@Component({
selector: 'my-app',
styles: [`
`],
template: `
<div class="container">
<section class="panel">
<div class="panel-body">
<youtube-player
[videoId]="id"
[playerVars]="{
'autohide': 0,
'disablekb': 1,
'showinfo' : 0,
'fs' : 0,
'rel' : 0,
'cc_load_policy' : 0,
'iv_load_policy': 3,
'controls' : 0,
'modestbranding' : 0,
'enablejsapi': 0
}"
(ready)="savePlayer($event)"
(change)="onStateChange($event)"
>
</youtube-player>
</div>
</section>
<div class="col-md-12">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" (click)="playVideo()">Play</button>
<button type="button" class="btn btn-default" (click)="pauseVideo()">Pause</button>
</div>
</div>
<div class="col-md-12">
<section class="panel">
<div class="panel-title">Player State</div>
<div class="panel-body">
<pre>{{ ytEvent }}</pre>
</div>
</section>
</div>
</div>
`
})
export class AppComponent {
id = 'KJamzD0KntE';
private player;
private ytEvent;
constructor() {
}
onStateChange(event) {
this.ytEvent = event.data;
}
savePlayer(player) {
this.player = player;
}
playVideo() {
this.player.playVideo();
}
pauseVideo() {
this.player.pauseVideo();
}
}