cdkVirtualFor occupy height and show scroll even if there is single item Angular 6
<tr *cdkVirtualFor="let p of products;let i = index;">
<ng-container *ngIf="listView || (!listView && p.totalPrice > 0)">
<td>
<div class="itemsSet">
<!-- <span class="product_image"><img src="../../../../Content/images/{{p.imageUrl}}"></span> -->
<span class="product_brand"><img
src="../../../../Content/images/{{p.supplierLogoUrl}}"></span>
<span class="product_name" (mouseover)="showProductDetail(p);op1.toggle($event)">
{{p.title}} <i class="fa fa-info-circle"></i>
</span>
</div>
</td>
<td style="text-align: left;">{{p.brandValue}}</td>
<td>{{p.packText}}</td>
<td>{{p.sizeText}}{{p.sizeUOMValue}}</td>
<td><span class="color_green">{{(p.price != 0 ? (p.price | currency : 'USD') : 'TBD')}}</span>
</td>
<td>
<input type="number" class="form-control" min="0" [disabled]="p.price == 0"
(change)="calculateTotalPrice(p)" (keyup)="calculateTotalPrice(p)" [(ngModel)]="p.qty"
oninput="validity.valid||(value='');">
</td>
<td>{{p.totalPrice | currency : 'USD'}}</td>
<td>
<!-- Product Compare Overlay Panel Button -->
<a href="javascript:void(0);" (click)="showSimilarItemsOverlay($event, p.supplierProductId)"
[ngClass]="{'color_green':p.compareflag == 0,'color_red':p.compareflag != 0 }"><i
class="fa fa-tags"></i><i class="fa fa-chevron-down"></i>
</a>
</td>
<td><button type="button" (click)="toggleFavorite(p)"><i class="fa"
[class.fa-plus-circle]="!p.favorite" [class.fa-trash]="p.favorite"></i></button>
</td>
</ng-container>
</tr>
I've used cdkVirtualFor for virtually loading data into table. but when I hide the row using ngIf, it still show the blank rows and occupy space.
If I use ngFor, it is working properly.