the virtual scroll CDK with dynamic size (Angular 18)

I use CDK virtual scroll to optimize the display of my data. I've even tested CDK experimental with autosizing, which obviously doesn't work in Angular 18.

My items have a minimum size of 26px, which varies depending on the content. So I can't know in advance what size the item will be.

Do you have any ideas for my code?


<cdk-virtual-scroll-viewport [itemSize]="getItemSize()" class="viewport-container">

<div *cdkVirtualFor="let category of categoryArraySignal(); trackBy: trackByCategoryName;"
style="display: flex" [ngClass]="{'hightlighted': lastSelectedCategoryEvent === category}">

<div (click)="selectCategory(category)" class="category-container"
[ngStyle]=" {'height': timeLineService.calculateHeightCellForCategoryItem(timeLineEvents, category.categoryName) + 'px '}">
<div class="category-item">
{{ category.categoryName }}
</div>

<div *ngIf="isTimeLineEventsContainsStormEvent(timeLineService.getTimeLineEventsForCategoryName(category.categoryName, timeLineEvents))"
class="container-storm-icon">
<mat-icon svgIcon="Storm" class="storm-icon" [ngClass]="getStormIconColor(category.categoryName)"></mat-icon>
</div>
</div>

<div style="width: 100%; display: flex; flex-direction: column;">
<div class="row-container">
<div *ngFor="let categoryContainer of getCategoryContainerByCategoryName(category.categoryName)">
<div style=" height:26px; width: 100%; display: flex"
*ngFor="let rowContent of categoryContainer.rows.rowContent">
<div *ngFor="let timeLineEvent of rowContent.timeEventsInRow">
<app-timeline-event [timeLineEvent]="timeLineEvent"
[componentForTooltip]="componentForTooltip"
[isActivateBorderColor]="isActivateBorderColor"></app-timeline-event>

</div>
</div>
</div>
</div>
</div>
</div>
</cdk-virtual-scroll-viewport>
I can get the size of each item with the calculateHeightCellForCategoryItem method, but I don't know how to do it.

Continue reading...