model-details-artifacts.component.html

<div>
  <div class="model-details-tabwrapper">
    <div class="md-intro-container spacebetween">
      <h6 class="sectiontitle9">MODEL ARTIFACTS</h6>
    </div>
  </div>
  <div class="table-container">
    <table mat-table [dataSource]="artifactDownload">
      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Artifact Name</th>
        <td matTooltip="{{ element.name }}" mat-cell *matCellDef="let element">
          {{ element.name }}
        </td>
      </ng-container>

      <!-- Version Column -->
      <ng-container matColumnDef="version">
        <th mat-header-cell *matHeaderCellDef>Version</th>
        <td mat-cell *matCellDef="let element" class="font-weight500">
          {{ element.version }}
        </td>
      </ng-container>

      <!-- Modified on Column -->
      <ng-container matColumnDef="size">
        <th mat-header-cell *matHeaderCellDef>Modified on</th>
        <td mat-cell *matCellDef="let element" class="font-weight500">
          {{ element.created | date: "MM/dd/yyyy" }}
        </td>
      </ng-container>

      <!-- Size Column -->
      <ng-container matColumnDef="modified on">
        <th mat-header-cell *matHeaderCellDef>Size</th>
        <td mat-cell *matCellDef="let element" class="font-weight500">
          {{ element.size | formatBytes: 1 }}
        </td>
      </ng-container>

      <!-- action Column -->
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef>Action</th>
        <td mat-cell *matCellDef="let element">
          <button
            *ngIf="!(isUserIdAvailable$ | async)"
            mat-button
            class="mdl-button mdl-js-button btn-grid-action"
            (click)="showAdvancedLogin()"
          >
            <i class="fa fa-download" aria-hidden="true"></i>
          </button>
          <button
            *ngIf="isUserIdAvailable$ | async"
            mat-button
            [disabled]="element.mask"
            class="mdl-button mdl-js-button btn-grid-action"
            (click)="downloadArtifact(element.artifactId, element.artifactType)"
          >
            <i class="fa fa-download" aria-hidden="true"></i>
          </button>
        </td>
      </ng-container>

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