src/app/features/mail/components/mail-inbox/mail-inbox.component.html

<!-------------------------------------------------------------------------------
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<div class="email-inbox--title">
  <span class="email-inbox--title--text">
    {{"mails.inbox" | translate}} {{"(" + (appMails?.length ? appMails.length : 0) + ")"}}
  </span>

  <app-progress-spinner
    [class.progress-spinner---hidden]="!appLoading">
  </app-progress-spinner>

  <button (click)="appFetch.emit()"
          *ngIf="!appLoading"
          [disabled]="appLoading"
          class="openk-button openk-button-rounded openk-info email-inbox--refresh-button">
    <mat-icon>refresh</mat-icon>
  </button>
</div>

<div class="email-inbox--list">

  <a *ngFor="let item of appMails"
     [class.email-inbox--list--element---active]="item.identifier === appSelectedMailId"
     [queryParams]="{ mailId: item.identifier }"
     [routerLink]="'/mail'"
     class="email-inbox--list--element">
    <span class="email-inbox--list--element--title">{{ item.subject }}</span>
    <br>
    <span class="email-inbox--list--element--date">
      {{"mails.at" | translate}} {{(item.date | appMomentPipe).format(dateFormat)}}
    </span>
    <br>
    <div class="email-inbox--list--element--sender">
      <span class="email-inbox--list--element--sender--text">
        {{"mails.from" | translate}}
      </span>
      <div class="email-inbox--list--element--sender--column">
        <span *ngFor="let contact of (item.from | appSenderSplitNameMail)"
              class="email-inbox--list--element--sender--text">
          {{contact}}
        </span>
      </div>
    </div>

  </a>
</div>