HTML

<mat-card id="search">
  <mat-form-field class="recipe-form">
    <input type="text" matInput placeholder="search by restaurant" value="restaurant">

   </mat-form-field>
 </mat-card>

 <mat-card id="details" *ngFor="let recipe of list">
     <mat-card-title>{{ recipe.name }}</mat-card-title>
     <mat-card-subtitle>Place: {{ recipe.place }}</mat-card-subtitle>
     <mat-card-subtitle>Rating: {{recipe.rating}}</mat-card-subtitle>
     <mat-card-subtitle>Notes: {{recipe.notes}}</mat-card-subtitle>
     <mat-card-actions>
       <button (click)="goMap(recipe)" mat-button><mat-icon>map</mat-icon></button>
       <button (click)="share(recipe)" mat-button><mat-icon>share</mat-icon></button>
       <button (click)="goDetails(recipe)" mat-button><mat-icon>list</mat-icon></button>

     </mat-card-actions>
  </mat-card>

  <a id="btnCreate" mat-fab routerLink="/recipe"><mat-icon>create</mat-icon></a>