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>