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-box-placeholder-text' | translate }}"
         (input)="searchComments(searchBox.value)">
  <button mat-button *ngIf="searchBox.value" (click)="hideCommentsList=false; searchBox.value=''">
    <mat-icon>close</mat-icon>
  </button>

  <button mat-button *ngIf="!searchBox.value && userRole == '1'" color="accent" [matTooltip]="'Export comments'" (click)="export(true)">
    <mat-icon class="add-icon">cloud_download</mat-icon>
  </button>

  <button mat-button *ngIf="!searchBox.value" color="accent" (click)="openSubmitDialog()">
    <mat-icon class="add-icon">add_circle</mat-icon>
  </button>
</div>
<mat-card class="outer-card" *ngIf="hideCommentsList">
  <app-comment *ngFor="let current of filteredComments" [comment]="current"> </app-comment>
</mat-card>
<mat-card class="outer-card" *ngIf="!hideCommentsList">
  <app-comment *ngFor="let current of comments | orderBy: 'score'" [comment]="current"> </app-comment>
</mat-card>