Angular 2 - *ngFor Example with Bootstrap Table

import {Component} from 'angular2/core';

interface Employee {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
}

@Component({
  selector: 'my-app',
  template:`
  <div class="row">
  <div class=col-sm-12>
    <h1 class="inline">{{title}}</h1>
    <button class="btn btn-default" (click)="addEmployee()">Add</button>
  </div>
  </div>
  <div class="row">
  <div class="col-sm-8">
    <table class="table table-hover"> 
    <thead> 
      <tr> 
          <th>Id</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th></th>
      </tr> 
    </thead> 
    <tbody> 
      <tr *ngFor="#employee of employes" (click)="onSelect(employee)"  
      [class.selected]="employee === selectedEmployee">
        <th scope="row">{{employee.id}}</th>
          <td>{{employee.firstName}}</td>
          <td>{{employee.lastName}}</td>
          <td>{{employee.email}}</td>
          <td><button class="btn btn-sm btn-danger" (click)="removeEmployee(employee)">X</button></td>
      </tr>
      </tbody>
    </table>
  </div>
  <div *ngIf="selectedEmployee" class="col-sm-4" >
      <h2 class="inline">{{selectedEmployee.firstName}} {{selectedEmployee.lastName}} Details</h2>
      <button class="btn btn-default" (click)="onSelectedClose()">Ok</button>
      <div><label>id: </label>{{selectedEmployee.id}}</div>
      <div>
        <label>First Name: </label>
        <input class="form-control" [(ngModel)]="selectedEmployee.firstName" placeholder="First name"/>
        <br>
        <label>Last Name: </label>
        <input class="form-control" [(ngModel)]="selectedEmployee.lastName" placeholder="Last name"/>
        <br>
        <label>Email: </label>
        <input class="form-control" [(ngModel)]="selectedEmployee.email" placeholder="email"/>
      </div>
  </div>
  </div>
  `,
  styles:[`
    .selected {
      background-color: #EBEBEB !important;
    }
    .inline {
      display: inline !Important;
    }
  `]
})
export class AppComponent {
  title = 'Employes';
  employes = _.sortBy(EMPLOYES, "id").reverse();
  selectedEmployee: Employee;
  addEmployee: function(){
    var newEmployee = { "id": this.employes.length+1, "firstName": "", "lastName": "", "email": "" }
    this.employes.splice(0, 0, newEmployee);
    this.selectedEmployee = newEmployee;

  };
  removeEmployee: function(employee: Employee){
    this.employes = _.without(this.employes, _.findWhere(this.employes, {id: employee.id}));
    if(this.selectedEmployee === employee)
    this.onSelectedClose();
  };
  onSelect(employee: Employee) { this.selectedEmployee = employee; }
  onSelectedClose(){
    this.selectedEmployee = null;
  }
}

var EMPLOYES: Employee[] = [
  { "id": 1, "firstName": "John", "lastName": "Doe", "email": "j.doe@gmail.com" },
  { "id": 2, "firstName": "Bob", "lastName": "Sullivan", "email": "b.sullivan@gmail.com" },
  { "id": 3, "firstName": "Mark", "lastName": "O'Really", "email": "m.oreally@gmail.com" },
  { "id": 4, "firstName": "Mary", "lastName": "Zamora", "email": "m.zamora@gmail.com" },
  { "id": 5, "firstName": "Lola", "lastName": "Eisenberg", "email": "l.eisenberg@gmail.com" },
  { "id": 6, "firstName": "Sam", "lastName": "Cuttle", "email": "s.cuttle@gmail.com" },
  { "id": 7, "firstName": "Tommy", "lastName": "Lee", "email": "t.lee@gmail.com" },
  { "id": 8, "firstName": "Michael", "lastName": "Farage", "email": "m.farage@gmail.com" },
  { "id": 9, "firstName": "Robert", "lastName": "Dempsey", "email": "r.dempsey@gmail.com" },
  { "id": 10, "firstName": "Phil", "lastName": "Huth", "email": "p.huth@gmail.com" }
];

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

bootstrap(AppComponent);

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 ngFor Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 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>
    <script data-require="underscore.js@*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-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.20/system-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/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.7/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
       <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Angular2 *ngFor example with Bootstrap Table</a>
            </div>
        </div><!-- /.container-fluid -->
    </nav>
    <my-app>Time is an illusion...</my-app>
  </body>

</html>

#Angular2 Example *ngFor with Bootstrap Table

Author: Giuseppe Pace

Follow me [@giuseppepace89]([https://twitter.com/giuseppepace89)