<div fxLayout="row" id="search-container">
  <mat-label>
    <mat-icon>search</mat-icon>
  </mat-label>
  <input matInput #searchBox placeholder="Search in comments" (focus)="hideCommentsList=true"
    (input)="searchComments(searchBox.value)">
  <button mat-flat-button color="accent" (click)="hideCommentsList=false; searchBox.value='';">Cancel</button>
</div>

<mat-nav-list class="app-class"  *ngIf="hideCommentsList && searchBox.value != ''">
  <a mat-list-item href="/comment/{{comment.id}}" *ngFor="let comment of filteredComments"> {{comment.subject}} </a>
</mat-nav-list>


<mat-card class="outer-card" *ngIf="!hideCommentsList">
  <app-comment *ngFor="let current of comments" [comment]="current"> </app-comment>
</mat-card>