comment-list.component.html

<div fxLayout="row" id="search-container">
  <mat-label fxLayoutAlign="center center">
    <mat-icon class="search-icon">search</mat-icon>
  </mat-label>
  <input #searchBox placeholder="{{ 'comment-list-page.search' | translate }}"
    (input)="searchComments(searchBox.value)">
  <button mat-icon-button class="searchBarButton close" *ngIf="searchBox.value"
          (click)="hideCommentsList=false; searchBox.value=''">
    <mat-icon>close</mat-icon>
  </button>
  <span class="fill-remaining-space"></span>
  <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && userRole === 1 && comments.length > 0"
    [matTooltip]="'Export comments'" (click)="openExportDialog()">
    <mat-icon class="searchBarIcon" color="accent">cloud_download</mat-icon>
  </button>

  <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value"
          color="accent" (click)="openSubmitDialog()">
    <mat-icon class="searchBarIcon">add_circle</mat-icon>
  </button>

  <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && comments.length > 0"
          color="accent" [matMenuTriggerFor]="filterMenu">
    <mat-icon class="searchBarIcon">sort</mat-icon>
  </button>

  <mat-menu #filterMenu="matMenu" xPosition="before">
    <div id="filterIcon">
      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterMarkAsCorrect()">
        <mat-icon>check_circle</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterFavorite()">
        <mat-icon>star</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterMarkAsRead()">
        <mat-icon>visibility</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortVoteDesc()">
        <mat-icon>keyboard_arrow_up</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortVote()">
        <mat-icon>keyboard_arrow_down</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortTimeStamp()">
        <mat-icon>remove</mat-icon>
      </button>
      <button mat-icon-button *ngIf="userRole === 1" (focus)="hideCommentsList=false" (click)="deleteComments()">
        <mat-icon color="warn">delete</mat-icon>
      </button>
    </div>
  </mat-menu>
</div>

<mat-card class="outer-card" *ngIf="user.role === 0">
  <app-comment *ngFor="let current of getCommentsParticipant()" [comment]="current"></app-comment>
</mat-card>
<mat-card class="outer-card" *ngIf="user.role === 1">
  <app-comment *ngFor="let current of getCommentsCreator()" [comment]="current"></app-comment>
</mat-card>