Angular + Typescript Demo Plunk

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>
 
  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { ReactiveFormsModule } from '@angular/forms';
import {VariableDefinitionsComponent} from './list/variable-definitions.component'
import {VariableDefinitionsDetailComponent} from './detail/variable-definitions-detail.component'
import { VariableService } from './services/variable.service';

@Component({
  selector: 'my-app',
  template: `
    <app-variable-definitions></app-variable-definitions>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule,
    ReactiveFormsModule ],
  declarations: [ App, VariableDefinitionsComponent, VariableDefinitionsDetailComponent ],
  providers: [VariableService],
  bootstrap: [ App ]
})
export class AppModule {}

import {Component, OnInit} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/finally';

import { Variable } from '../models/Variable';
import { VariableService } from '../services/variable.service';

@Component({
  selector: 'app-variable-definitions',
  templateUrl: './src/list/variable-definitions.component.html',
})

export class VariableDefinitionsComponent implements OnInit {
  variables: Observable<Variable[]>;
  isLoading = false;
  selectedVariable: Variable;

  constructor(private variableService: VariableService) {}
  ngOnInit() { this.getVariables(); }
  getVariables() {
    this.isLoading = true;
    this.variables = this.variableService.getVariables()
      .finally(() => this.isLoading = false);
    this.selectedVariable = undefined;
  }
  select(variable: Variable) { this.selectedVariable = variable; }
}

<div class="row">
  <div *ngIf="selectedVariable">
    <app-variable-definitions-detail [variable]="selectedVariable"></app-variable-definitions-detail>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">
        <div class="panel-title">Variables</div>
      </div>
      <table class="table">
        <tr>
          <th>Type</th>
          <th>Name</th>
          <th>Description</th>
          <th>VOR Acct Id</th>
          <th>Formula</th>
          <th></th>
        </tr>
        <tr *ngFor="let variable of variables | async">
          <td>{{variable.TYPE}}</td>
          <td>{{variable.NAME}}</td>
          <td>{{variable.DESCRIPTION}}</td>
          <td>{{variable.ACCOUNT_NUM}}</td>
          <td>{{variable.FORMULA}}</td>
          <td> 
            <div class="btn-group" role="group" aria-label="...">
              <button type="button" class="btn btn-default">Delete</button>
              <button (click)="select(variable)" type="button" class="btn btn-default">Edit</button>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/delay';
import { Variable } from './models/Variable';
import { VARIABLES } from '../mocks/mock-vars';
@Injectable()
export class VariableService {
  delayMs = 500;
  // Fake server get; assume nothing can go wrong
  getVariables(): Observable<Variable[]> {
    return of(VARIABLES).delay(this.delayMs); // simulate latency with delay
  }
  // Fake server update; assume nothing can go wrong
  updateVariable(variable: Variable): Observable<Variable>  {
    const oldVariable = VARIABLES.find(v => v.VARIABLE_SK === variable.VARIABLE_SK);
    const newVariable = Object.assign(oldVariable, variable); // Demo: mutate cached variable
    return of(newVariable).delay(this.delayMs); // simulate latency with delay
  }
}

import { Variable } from '../models/Variable';
export const VARIABLES: Variable[] = [
  {
    'VARIABLE_SK': 137,
    'NAME': 'DOM1',
    'DESCRIPTION': 'DOM1 Test',
    'TYPE': 'INDEX',
    'ACCOUNT_NUM': '',
    'FORMULA': '',
    'display_formula': ''
  },
  {
    'VARIABLE_SK': 138,
    'NAME': 'DOM2',
    'DESCRIPTION': 'My Test',
    'TYPE': 'INDEX',
    'ACCOUNT_NUM': '',
    'FORMULA': '',
    'display_formula': ''
  },
  {
    'VARIABLE_SK': 139,
    'NAME': 'DomFund1',
    'DESCRIPTION': 'My Test',
    'TYPE': 'FUND',
    'ACCOUNT_NUM': '12345asdf',
    'FORMULA': '',
    'display_formula': ''
  },
  {
    'VARIABLE_SK': 140,
    'NAME': 'DomFactor1',
    'DESCRIPTION': 'My Test',
    'TYPE': 'FACTOR',
    'ACCOUNT_NUM': '',
    'FORMULA': '_137-_138',
    'display_formula': 'DOM1-DOM2'
  }
];

import { Component, Input, OnChanges } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { types, Variable } from '../models/Variable';
import { VariableService } from '../services/variable.service';
 
@Component({
  selector: 'app-variable-definitions-detail',
  templateUrl: './src/detail/variable-definitions-detail.component.html',
})
export class VariableDefinitionsDetailComponent implements OnChanges {
  @Input() variable: Variable;
  variableForm: FormGroup;
  types = types;
  nameChangeLog: string[] = [];
  logNameChange() {
    const nameControl = this.variableForm.get('name');
    nameControl.valueChanges.forEach(
      (value: string) => this.nameChangeLog.push(value)
    );
  }

  constructor(
    private fb: FormBuilder,
    private variableService: VariableService
  ) {
    this.createForm();
    this.logNameChange();
  }

  createForm() {
    this.variableForm = this.fb.group({
      type: ['', Validators.required],
      name: ['', Validators.required],
      description: '',
      account_num: '',
      formula: ''
    });
  }

  ngOnChanges() {
    this.variableForm.reset({
      type: this.variable.TYPE,
      name: this.variable.NAME,
      description: this.variable.DESCRIPTION,
      account_num: this.variable.ACCOUNT_NUM,
      formula: this.variable.display_formula
    });
  }

  onSubmit() {
    this.variable = this.prepareSaveVariable();
    this.variableService.updateVariable(this.variable).subscribe(/* error handling */);
    this.ngOnChanges();
  }
  revert() { this.ngOnChanges(); }

  prepareSaveVariable(): Variable {
    const formModel = this.variableForm.value;

    // return new `Variable` object containing a combination of original variable value(s)
    // and deep copies of changed form model values
    const saveVariable: Variable = {
      TYPE: formModel.type as string,
      NAME: formModel.name as string,
      DESCRIPTION: formModel.description as string,
      ACCOUNT_NUM: formModel.account_num as string,
      FORMULA: formModel.formula as string,
      display_formula: formModel as string
    };
    return saveVariable;
  }
}

<h2>Variable Detail</h2>
<h3><i>Please enter details</i></h3>
<form [formGroup]="variableForm" (ngSubmit)="onSubmit()" novalidate>
  <div style="margin-bottom: 1em">
    <button type="submit"
            [disabled]="variableForm.pristine" class="btn btn-success">Save</button> &nbsp;
    <button type="reset" (click)="revert()"
            [disabled]="variableForm.pristine" class="btn btn-danger">Revert</button>
  </div>
  <div class="form-group">
    <label class="center-block">Type:
      <select class="form-control" formControlName="type">
        <option *ngFor="let type of types" [value]="type">{{type}}</option>
      </select>
    </label>
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
    <label class="center-block">Description:
      <input class="form-control" formControlName="description">
    </label>
    <label class="center-block">VOR Account Number:
      <input class="form-control" formControlName="account_num">
    </label>
    <label class="center-block">Formula:
      <input class="form-control" formControlName="formula">
    </label>
  </div>
</form>
<p>Form value: {{ variableForm.value | json }}</p>
<p>Form status: {{ variableForm.status | json }}</p>
<h4>Name change log</h4>
<div *ngFor="let name of nameChangeLog">{{name}}</div>

export class Variable {
    VARIABLE_SK?:number;
    NAME:string;
    DESCRIPTION?:string;
    ACCOUNT_NUM?:string;
    TYPE:string;
    FORMULA?:string;
  display_formula?:string;
}

export const types = ['INDEX', 'FUND', 'FACTOR'];