blob: 4584d6fc7690ca4bc519fe6519352b23f5820075 (
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
|
<div *ngFor="let recipe of recipes">
<p>{{recipe}}</p>
</div>
<ul class="list">
<cdk-virtual-scroll-viewport [itemSize]="100" class="example-viewport" style="height:300px; minBufferPx:50;">
<ng-container *cdkVirtualFor="let recipe of recipes" class="example-viewport">
<h1>Hello</h1>
<!--<div id="cardContainer">
<mat-card class="example-card">
<mat-card-header>
<div id="card-title">
<mat-card-title (click)="cookPage(i)">{{recipes[i].name}}</mat-card-title>
</div>
<div id="edit">
<input (click)="edit(i)" 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(i)" type="image" src="https://image.flaticon.com/icons/svg/61/61391.svg" alt="delete" width="24" height="32">
</div>
</mat-card-header>
<img mat-card-image src={{recipes[i].photos[0]}} alt="Photo of recipe" width="150" height="220">
<p>Rating: {{recipes[i].rating}}</p>
</mat-card>
</div>
-->
</ng-container>
</cdk-virtual-scroll-viewport>
</ul>
<!--No image found web address: https://www.azfinesthomes.com/assets/images/image-not-available.jpg -->
|
