blob: 7a9f8d47b5ceb1813ba8425c836c60da59cf81b7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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 -->
|
