core/common/virtual-scroll/virtual-scroller-wrapper.component.ts
AfterViewChecked
selector | c8y-virtual-scroller-wrapper |
standalone | true |
imports |
NgIf
NgSwitch
NgSwitchCase
CdkVirtualScrollViewport
VirtualScrollWindowDirective
CdkVirtualForOf
NgTemplateOutlet
CdkFixedSizeVirtualScroll
AsyncPipe
|
templateUrl | ./virtual-scroller-wrapper.component.html |
Properties |
Methods |
Inputs |
constructor()
|
containerHeight |
Type : number
|
filterPipe |
Type : any
|
Default value : pipe(tap())
|
itemHeight |
Type : number
|
items |
Type : []
|
strategy |
Type : "fixed" | "window"
|
template |
Type : TemplateRef<any>
|
trackByFn |
Type : (i: any, item: any) => any
|
Default value : (i, item) => {
return item.id;
}
|
apply |
apply()
|
Returns :
void
|
ngAfterViewChecked |
ngAfterViewChecked()
|
Returns :
void
|
items$ |
Type : Observable<>
|
virtualScrollViewport |
Type : CdkVirtualScrollViewport
|
Decorators :
@ViewChild(CdkVirtualScrollViewport)
|
<ng-container
*ngIf="items$ | async as items"
[ngSwitch]="strategy"
>
<ng-container *ngSwitchCase="'window'">
<cdk-virtual-scroll-viewport
class="inner-scroll"
windowVirtualScrollStrategy
[itemSizePx]="itemHeight"
data-cy="c8y-virtual-scroll-wrapper--window"
>
<div *cdkVirtualFor="let item of items; index as i; trackBy: trackByFn">
<ng-container
*ngTemplateOutlet="template; context: { $implicit: item, index: i }"
></ng-container>
</div>
</cdk-virtual-scroll-viewport>
</ng-container>
<ng-container *ngSwitchCase="'fixed'">
<cdk-virtual-scroll-viewport
class="inner-scroll"
[style.height]="containerHeight + 'px'"
[itemSize]="itemHeight"
data-cy="c8y-virtual-scroll-wrapper--fixed"
>
<div *cdkVirtualFor="let item of items; index as i; trackBy: trackByFn">
<ng-container
*ngTemplateOutlet="template; context: { $implicit: item, index: i }"
></ng-container>
</div>
</cdk-virtual-scroll-viewport>
</ng-container>
</ng-container>