Angular2 Directive Demo

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-shim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/angular2-polyfills.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/Rx.umd.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/angular2-all.umd.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

</head>

<body>
  <my-comp>Loading...</my-comp>
  <script>
    (function(app) {
      app.AppComponent =
        ng.core.Component({
          selector: 'my-comp',
          templateUrl: 'grid.html'
        })
        .Class({
          constructor: function() {

            this.employees = [{
              firstName: 'Rima',
              lastName: 'George',
              location: 'San Francisco'
            }, {
              firstName: 'Shaun',
              lastName: 'John',
              location: 'Germany'
            }, {
              firstName: 'Rahul',
              lastName: 'Kurup',
              location: 'Bangalore'
            }, {
              firstName: 'Samson',
              lastName: 'Davis',
              location: 'Canada'
            }, {
              firstName: 'Shilpa',
              lastName: 'Agarwal',
              location: 'Noida'
            }];

          }
        });


      document.addEventListener('DOMContentLoaded', function() {
        ng.platform.browser.bootstrap(app.AppComponent);
      });
    })(window.app || (window.app = {}));
  </script>
</body>

</html>

/* Styles go here */

Refactor your app to use Angular 1.5 components. Jay Raj shows you how to prepare your code for eventual migration to Angular 2. 

https://www.sitepoint.com/upgrade-to-angular-components/

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';


@Component({
  selector: 'app',
  providers: [Service],
  template: '{{greeting}} world!'
})
class App {
  constructor(service: Service) {
    this.greeting = service.greeting();
    setTimeout(() => this.greeting = 'Howdy,', 1000);
  }
}

class Service {
  greeting() {
    return 'Hello';
  }
}

bootstrap(App);

<div class="panel panel-primary">
	<div class="panel-heading">Employee Data Sheet</div>
	 <table class="table">
    	<thead>
    		<tr>
				<th>
					FirstName
				</th>
				<th>
					Last Name
				</th>
				<th>
					Location
				</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr *ngFor="#employee of employees">
				<td>
					{{ employee.firstName }}
				</td>
				<td>
					{{ employee.lastName }}
				</td>
				<td>
					{{ employee.location }}
				</td>
    		</tr>
    	</tbody>
  	 </table>
</div>