RecipeListComponent HTML file.

recipe-list.component.html

<div class="container-fluid">
  <div>
    <button *ngIf="!isAdd" mat-raised-button color="primary" class="btn-right mt-2" [routerLink]="['/add-update-recipe', 0]" >Add Recipe</button>
  </div>
  <div class="container">
    <mat-grid-list cols="3" rowHeight="500px">
      <mat-grid-tile *ngFor="let data of dataSource">
        <div class="container">
          <mat-card class="example-card">
            <mat-card-header>
              <mat-card-title>{{data.name}}</mat-card-title>
            </mat-card-header>
            <img mat-card-image src="../../assets/1.jpeg" alt="Photo of a Shiba Inu" width="100px;">
            <mat-card-content>
              <p>
                {{data.desc}}
              </p>
            </mat-card-content>
            <mat-card-actions>
              <button mat-raised-button color="primary" [routerLink]="['/add-update-recipe', data.recepiId]">Edit</button>
              <button mat-button>
                <mat-icon class="example-icon" aria-hidden="false" aria-label="Example delete icon" (click)="DeleteRecepi(data.recepiId)">delete</mat-icon>
              </button>
            </mat-card-actions>
          </mat-card>
        </div>
      </mat-grid-tile>
    </mat-grid-list>
  </div>

</div>