angular4 example

HTML

<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.5/dist/zone.min.js"></script>
<script src="https://unpkg.com/rxjs@5.2.0/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/core@4.0.1/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/common@4.0.1/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/compiler@4.0.1/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser@4.0.1/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser-dynamic@4.0.1/bundles/platform-browser-dynamic.umd.js"></script>
<my-app></my-app>

TypeScript

let { Component, NgModule } = ng.core;

@Component({
  selector: 'my-app',
  template: `
  	 	<table class="fundClassesTable table-striped" border="1">
      <tr *ngFor="let c of ColumnNames">
        <th class="tableItem bold">{{ c }}</th>
        <ng-container *ngFor="let f of data">
          <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
           <td class="tableItem" *ngIf="c == ColumnNames[3]">COMMERCIAL TERMS</td>
          <td class="tableItem" *ngIf="c == ColumnNames[4]">
              <button type="button" class="btn btn-default btn" style="float: left;"
                  (click)="buttonClicked(f.Id)">Review Terms</button>
          </td>
          <td [colSpan]="8" class="tableItem" *ngIf="c == ColumnNames[5]"></td>
          <td  *ngIf="c == ColumnNames[6]" class="tableItem"> {{f.PrimaryCurrencyName}}</td>
         
        </ng-container>
      </tr>
      </table>
  `,
})
class HomeComponent {
 public ColumnNames: string[] = ['Legal Class Name',
                                    'Last Edited',
                                    'Legal Class ID',
                                    '',
                                    'TERMS',
                                    'SUBSCRIPTIONS',
                                    'Primary Currency'];

		public data: any = [
  {
    "Description": "Class B",
    "AuditSummary": "rmenon May 22, 2019",
    "FeesReviewSummary": "",
    "TermsReviewSummary": "",
    "Id": 11166,
    "FundId": 5508,
    "FundClassType": 1,
    "CurrencyId": 5,
    "PrimaryCurrencyName": "CHF",
    "OtherCurrencyName": null,
    "ManagerStrategyId": 5508,
    "ManagerStrategyName": "Sylebra ",
    "SubVotingId": 2,
    "SubVotingName": "Yes",
    "SubHotIssueId": 3,
    "SubHotIssueName": "All Capital",
    "RedsFrqncyId": 5,
    "RedsFrqncyName":...