angular4 example

by nikhil4434

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">
        <ng-container *ngIf="f.AuditSummary">
          <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.AuditSummary =='false' ">{{f.Id}}</td>
        </ng-container>
      </ng-container>
  </tr>
</table>
  `,
})
class HomeComponent {
 public ColumnNames: string[] = ['Legal Class Name', 'Last Edited' , 'Legal Class ID'];

		public data: any = [
  {
    "Description": "Class B",
    "AuditSummary": false,
    "FeesReviewSummary": "",
    "TermsReviewSummary": "",
    "Id": 11166,
    "FundId": 5508,
    "FundClassType": 1,
    "CurrencyId": 5,
    "PrimaryCurrencyName": "CHF",
    "OtherCurrencyName": null,
    "ManagerStrategyId": 5508,
    "ManagerStrategyName": "Test1 ",
    "SubVotingId": 2,
    "SubVotingName": "Yes",
    "SubHotIssueId": 3,
    "SubHotIssueName": "All Capital",
    "RedsFrqncyId": 5,
    "RedsFrqncyName": "Quarterly",
    "RedsNoticeDays": 50,
    "NoticeTypeOfDaysId": 2,
    "NoticeTypeOfDaysName": "Calendar",
    "LockupTypeId": 3,
    "LockupTypeName": "Soft",
    "HardDurationMonthsId": 8,
    "HardDurationMonthsName": "36",
    "SoftDurationMonthsId": 6,
    "SoftDurationMonthsName": "18",
    "LockupFees0To12Pct": 4,
    "LockupFees12To24Pct": 5,
    "LockupFees24To36Pct": 5,
    "WebfolioRedsFee": "12000",
    "LockupComments": "Test by Jake",
    "ApplyGateDecliningBalance": true,
    "GateInvestorPct": 2,
    "GateSourceId": 1,
    "GateSourceName": "Fund Gate",
    "GateFundClassPct": 2,
    "IntialProceeds": 100,
    "PaymentInDays": 30,
    "PaymentTypeOfDaysId": 1,
   ...