binance-emac-list.component.html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Number Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> Nº </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <!-- EMAc Positions Column -->
  <ng-container matColumnDef="emacData">
    <th mat-header-cell *matHeaderCellDef> EMAc Positions </th>
    <td mat-cell *matCellDef="let element">
      <span *ngFor="let obj of element.data; let i = index; let last = last"
        [ngClass]="getEmacPositionClass(obj.emaPosition)" class="border">
        {{ obj.interval }} {{ obj.emaPosition | emacPositionEmoji }}
      </span>
    </td>
  </ng-container>

  <!-- EMAc Ranking Column -->
  <ng-container matColumnDef="ranking">
    <th mat-header-cell *matHeaderCellDef> EMAc Ranking Points </th>
    <td mat-cell *matCellDef="let element" [ngClass]="getEmacRankingClass(element.emacRanking)">
      {{element.emacRanking}} <span class="no-color">Pts</span>
    </td>
  </ng-container>

  <!-- Links Column: Broker, TradingView, etc. -->
  <ng-container matColumnDef="urls">
    <th mat-header-cell *matHeaderCellDef> Links </th>
    <td mat-cell *matCellDef="let element">
      <ng-container *ngFor="let link of element.urls">
        <a [href]="link" target="_blank" class="link-clean">🔗</a>
      </ng-container>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>