angular 2 + Multiple checkboxes + Working

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 QuickStart</title>
    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/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="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
    <!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
  </body>

</html>

import {Component, Pipe, PipeTransform} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';

class ContactInfo {
constructor(
    public description:string) { }
}

@Component({
	selector: 'my-app',
	templateUrl: 'mytemplate.html',
	directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] 
})
export class AppComponent { 
 check = []
arrayCheck = [{'key11':'value11'},{'key11':'value12'},{'key11':'value13'},{'key11':'value14'},{'key11':'value15'}];
demo2 = [1,2,3,4,5]
demoChk= [];

updateChecked(value) {
    if(document.getElementById('check'+value).checked == true){
      this.check.push(value);
    }
    else if (document.getElementById('check'+value).checked == false){
      let indexx = this.check.indexOf(value);
      this.check.splice(indexx,1);
    }
    console.log(this.check);
  }
  updateChecked2(value,event){
    if(event.target.checked){
      this.demoChk.push(value);
    }
    else if (!event.target.checked){
      let indexx = this.demoChk.indexOf(value);
      this.demoChk.splice(indexx,1);
    }
    console.log(this.demoChk)
  }
}

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<!-- using javascript method -->

<div *ngFor='#checkk of arrayCheck'>
  <input type='checkbox' [id]="'check'+checkk.key11" (change)="updateChecked(checkk.key11)">{{checkk.key11}}
</div>

<!-- Using Angular's Method -->
<div *ngFor='#no of demo2'>
  <input type='checkbox'  (change)="updateChecked2(no,$event)">{{no}}
</div>