angular-t9n/src/app/target/orphans/orphans.component.html

A translation tool for Angular i18n

<div class="mat-elevation-z8">
  <table mat-table matSort aria-label="Orphaned units" [dataSource]="dataSource">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Id</th>
      <td
        mat-cell
        [matTooltip]="row.locations?.join('\n')"
        [matTooltipDisabled]="!row.locations?.length"
        matTooltipClass="tooltip-linebreak"
        *matCellDef="let row"
      >
        {{ row.id }}
      </td>
    </ng-container>
    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Description</th>
      <td mat-cell *matCellDef="let row">{{ row.description }}</td>
    </ng-container>
    <ng-container matColumnDef="meaning">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Meaning</th>
      <td mat-cell *matCellDef="let row">{{ row.meaning }}</td>
    </ng-container>
    <ng-container matColumnDef="source">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Source</th>
      <td mat-cell *matCellDef="let row">{{ row.source }}</td>
    </ng-container>
    <ng-container matColumnDef="target">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Target</th>
      <td mat-cell *matCellDef="let row">{{ row.target }}</td>
    </ng-container>
    <ng-container matColumnDef="state">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>State</th>
      <td mat-cell *matCellDef="let row">{{ row.state | titlecase }}</td>
    </ng-container>
    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row">
        <a
          [routerLink]="['./', row.id, queryParams | async]"
          mat-icon-button
          i18n-matTooltip
          matTooltip="Migrate orphan"
        >
          <mat-icon>edit</mat-icon>
        </a>
      </td>
    </ng-container>

    <tr
      mat-header-row
      *matHeaderRowDef="
        ['id', 'description', 'meaning', 'source', 'target', 'state', 'action'];
        sticky: true
      "
    ></tr>
    <tr
      mat-row
      *matRowDef="
        let row;
        columns: ['id', 'description', 'meaning', 'source', 'target', 'state', 'action']
      "
    ></tr>
  </table>

  <mat-paginator
    [pageSize]="pageSize"
    [pageIndex]="pageIndex"
    [pageSizeOptions]="[25, 50, 100, 250]"
  >
  </mat-paginator>
</div>