diff options
Diffstat (limited to 'recipeBuddy/src/app/recipe-card/recipe-card.component.html')
| -rw-r--r-- | recipeBuddy/src/app/recipe-card/recipe-card.component.html | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/recipeBuddy/src/app/recipe-card/recipe-card.component.html b/recipeBuddy/src/app/recipe-card/recipe-card.component.html new file mode 100644 index 0000000..7a9f8d4 --- /dev/null +++ b/recipeBuddy/src/app/recipe-card/recipe-card.component.html @@ -0,0 +1,34 @@ +<cdk-virtual-scroll-viewport [itemSize]="1" class="example-viewport"> +<div *cdkVirtualFor="let recipe of recipes" class="example-test"> +<div id="cardContainer"> + <mat-card class="example-card"> + <mat-card-header> + <div id="card-title"> + <mat-card-title>{{recipe.name}}</mat-card-title> + </div> + <div id="edit"> + <input (click)="edit(getId(recipe))" type="image" src="https://image.freepik.com/free-icon/scissors_318-9061.jpg" + alt="edit" width="24" height="32"> + </div> + <div id="cart"> + <input (click)="shoppingCart()" type="image" src="https://image.flaticon.com/icons/png/512/126/126083.png" alt="cart" width="24" height ="32"> + </div> + <div id="delete"> + <input (click)="delete(getId(recipe))" type="image" src="https://image.flaticon.com/icons/svg/61/61391.svg" alt="delete" width="24" height="32"> + </div> + </mat-card-header> + <div *ngIf="recipe.photos.length > 1000; else elseBlock" id="imgContainer"> + <img mat-card-image src={{recipe.photos[0]}} alt="Photo of recipe"> + </div> + <ng-template #elseBlock> + <img mat-card-image src="https://seeklogo.net/wp-content/themes/seeklogo-2017/images/not-available.jpg" alt="No image available" width="150" height="220"> + </ng-template> + <div id="ratingContainer"> + <p>Rating: {{recipe.rating}}</p> + </div> + </mat-card> + </div> + </div> +</cdk-virtual-scroll-viewport> + +<!--No image found web address: https://www.azfinesthomes.com/assets/images/image-not-available.jpg -->
\ No newline at end of file |