Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
angular 2 basic counter

angular 2 basic counter

Basic counter in Angular 2.

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'
},
//packages defines our app package
packages: {
app: {
main: './counter.ts',
defaultExtension: 'ts'
}
}
});
<!DOCTYPE html>
<html>
<head>
<title>angular 2 basic counter</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/router.dev.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app></app>
</body>
</html>
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
@Component({
selector: 'app',
template: `
<button (click)="increment()">Increment</button>
<button (click)="decrement()">Decrement</button>
<div></div>
{{counter}}
`
})
export class App {
public counter : number = 0;
increment(){
this.counter += 1;
}
decrement(){
this.counter -= 1;
}
}
bootstrap(App, []);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.