Skip to content

Instantly share code, notes, and snippets.

Created April 26, 2016 19:51
What would you like to do?
Angular2 + Typescript Demo Plunk

Angular2 Starter Plunker - Typescript - Beta 0

A simple plunker demonstrating Angular2 usage:

  • Uses SystemJS + TypeScript to compile on the fly
  • Includes binding, directives, http, pipes, and DI usage.
//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"
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
<!DOCTYPE html>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src="config.js"></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
//our root app component
import {Component, Directive, Provider, forwardRef} from 'angular2/core'
import {NG_VALIDATORS} from 'angular2/common'
const provider = new Provider(
useExisting: forwardRef(() => Foo),
multi: true
selector: 'input[foo][ngModel],input[foo][ngControl]',
providers: [provider]
inputs: [
class Foo {
foo: string;
ngOnInit() {
console.log('onInit: ',;
validate(control) {
console.log('validate: ',;
selector: 'my-app',
providers: [],
template: `
<input foo="bar" [(ngModel)]="blah">
directives: [Foo]
export class App {
//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
bootstrap(App, [])
.catch(err => console.error(err));
/* Styles go here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment