Angular 2 Example - QuickStart

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      console.clear();
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
    </script>

    <!-- 3. Bootstrap -->
    <script>
      System.import('angular2/platform/browser').then(function(ng){
        System.import('src/hello_world').then(function(src) {
          ng.bootstrap(src.HelloWorld);
        });
      });
    </script>

  </head>

  <!-- 4. Display the application -->
  <body>
    <hello-world id="main">Loading...</hello-world>
  </body>

</html>

import {Component, ChangeDetectionStrategy} from 'angular2/core';
import {Game} from 'src/game';

@Component({
  selector: 'hello-world',
  templateUrl: 'src/hello_world.html',
  providers: [Game]
})

export class HelloWorld {
  constructor(public game: Game){
    console.log(document.getElementById("main"));
  }
  
  click(){
    this.game.activate();
  }
}

<div (click)="click()">
  
<p>Enter some text and watch the array get updated from the service:</p>
<p>Active: {{game.active}}</p>
</div>

//import {Injectable} from 'angular2/core';
import { Component} from 'angular2/core';

@Component({
  selector: '[game]',
  template: 'Active: {{active}}'
})

export class Game{
  active: boolean = false;

  constructor(){
    document.addEventListener('pointerlockchange', (a, b, c) => {
      this.active = !this.active;
    });
  }
  
  activate(){
    document.body.requestPointerLock();
  }
  
}

Active: {{active}}