Angular 2 Multiplication Table

<!DOCTYPE html>
<html>

<head>
  <title>Angular 2 Multiplacation Table</title>

  <!-- 1. Load libraries -->
  <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.14/angular2-polyfills.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.14/Rx.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.14/angular2.dev.js"></script>
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

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

  <!-- Config Agular 2 and Typescript -->
  <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {
        emitDecoratorMetadata: true
      },
      packages: {
        'app': {
          defaultExtension: 'ts'
        }
      }
    });
    System.import('app/main')
      .then(null, console.error.bind(console));
  </script>

</head>

<!-- 4. Display the application -->

<body>
  <h1>Angular 2 Multiplication Table</h1>
  <multiplication-table>Loading...</multiplication-table>
</body>

</html>

/* Styles go here */

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {bootstrap}  from 'angular2/platform/browser';
import {Angular2MultTable} from './angular-2-multiplication';
 
bootstrap(Angular2MultTable);


/*
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/ 
*/

/**
 * Created by Aman Gupta
 */
import { Component } from 'angular2/core';
import { CORE_DIRECTIVES } from 'angular2/common';

/*Angular 2 Multiplication Table*/
@Component({
    selector: 'multiplication-table',
    template: `
                <div> 
                     <input type="text" [(ngModel)]="number"  placeholder="Enter input here">
                     <button (click)="generateNo();">Generate Multiplication Table</button>
                     <br>
                     <br>
                     <div class="col-sm-3" *ngFor="#item of panels;">
                       <div class="panel panel-default" >
                          <div class="panel-body" *ngFor="#i of tablenumbers;">{{item}} * {{i}} = {{i*item}}
                          </div>
                       </div>
                     </div>
                </div>
             `,
    directives: [CORE_DIRECTIVES]
})
export class Angular2MultTable {
    number: int = '';
    panels: number[] = [];
    tablenumbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

    generateNo = function() {
        console.log(this.number);
        this.panels = [];
        for (let i = 1; i <= this.number; i++) {
            console.log(i);
            this.panels.push(i);
        }
    }
}