Files
clearml-web/src/app/webapp-common/shared/components/virtual-grid/virtual-grid.component.html
shyallegro e02814a7c3 release 1.8 (#42)
Co-authored-by: Shay Halsband <shy.halsband@gmail.com>
2022-11-28 18:10:38 +02:00

19 lines
984 B
HTML

<cdk-virtual-scroll-viewport class="card-container" [itemSize]="cardHeight + gridGap">
<div
class="card-row"
[class.snippets-mode]="snippetsMode"
[style.--cardWidth]="cardWidth + 'px'"
[style.--gridGap]="gridGap + 'px'"
*cdkVirtualFor="let row of itemRows$ | async; let rowIndex = index"
>
<ng-container *ngFor="let item of row; let itemIndex = index; trackBy: trackByFn">
<ng-container *ngTemplateOutlet="cardTemplate; context: {$implicit: item, index: itemIndex + rowIndex * cardsInRow}"></ng-container>
</ng-container>
<div *ngFor="let blankItem of [].constructor(cardsInRow - row.length)"></div>
</div>
<div class="load-more" *ngIf="showLoadMoreButton && (itemRows$ | async)?.length" (smScrollEnd)="autoLoadMore && !loading && autoLoad()">
<button (click)="loadMoreClicked.emit()" class="btn btn-primary load-more-btn">
<i *ngIf="loading" class="load-spinner"></i>LOAD MORE</button>
</div>
</cdk-virtual-scroll-viewport>