SFM-Broker/src/app/chart-top-brokers/chart-top-brokers.component.html

<kendo-grid [data]="gridData | async "  [scrollable]="'none'">
  <kendo-grid-column field="Rank" title="ID" width="40">
  </kendo-grid-column>
  <kendo-grid-column field="First" title="Broker Name" minResizableWidth="250" >
    <ng-template kendoGridCellTemplate let-dataItem>
      <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.Id)}"></div>
      <div class="customer-name"> {{ dataItem.First }} , {{ dataItem.Last }} </div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="License" title="License" width="80">
  </kendo-grid-column>
  <kendo-grid-column field="Login" title="Login" width="80">
  </kendo-grid-column>
  <kendo-grid-column field="Organization" title="Organization" width="80">
  </kendo-grid-column>
  <kendo-grid-column field="NumOfLoans" title="Num Of Loans" width="50" [style]="{'text-align':'center'}" >
  </kendo-grid-column>
  <kendo-grid-column field="NumOfUnSettledLoans" title="Non-Settled" width="80" [style]="{'text-align':'center'}">
  </kendo-grid-column>
  <kendo-grid-column field="TotalReward" title="TotalReward" width="120">
    <ng-template kendoGridCellTemplate let-dataItem>
      <span [ngClass]="{'red text-bold': dataItem.TotalReward < 1000000}">{{ dataItem.TotalReward | currency }}</span>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="TotalLoanValue" title="TotalLoanValue" width="120">
    <ng-template kendoGridCellTemplate let-dataItem>
      <span [ngClass]="{'green text-bold': dataItem.TotalLoanValue < 500000}">{{ dataItem.TotalLoanValue | currency }}</span>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>