core/common/load-more.component.ts
selector | c8y-load-more |
templateUrl | ./load-more.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
Accessors |
constructor(element: ElementRef, cdRef: ChangeDetectorRef)
|
|||||||||
Parameters :
|
class |
Type : string
|
Default value : 'c8y-list__item p-0'
|
container |
Type : ElementRef
|
hidden |
Type : boolean
|
Default value : false
|
hideNoMoreDataHint |
Type : boolean
|
Default value : false
|
loadingLabel |
Type : string
|
loadingTemplate |
Type : TemplateRef<any>
|
loadNextLabel |
Type : string
|
maxIterations |
Type : number
|
Default value : 10
|
noMoreDataHint |
Type : TemplateRef<any>
|
paging |
Type : Paging<any>
|
useIntersection |
Type : boolean
|
Default value : true
|
onLoad |
Type : EventEmitter
|
class |
Type : string
|
Async loadMore | ||||
loadMore(event?)
|
||||
Parameters :
Returns :
any
|
ngAfterContentInit |
ngAfterContentInit()
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
counter |
Type : number
|
Default value : 0
|
hasNoMoreData |
Default value : false
|
isLoading |
Default value : false
|
hostClass |
gethostClass()
|
hasMore |
gethasMore()
|
<button
class="btn btn-default btn-block text-center"
(click)="loadMore($event)"
[ngClass]="{ 'btn-pending': isLoading }"
*ngIf="hasMore && !(loadingTemplate && isLoading)"
[style.visibility]="hidden ? 'hidden' : 'visible'"
[style.height]="hidden ? '1px' : null"
title="{{ 'Load more' | translate }}"
>
<ng-container *ngIf="!isLoading">
<span *ngIf="loadNextLabel; else loadPage" [innerHTML]="loadNextLabel | translate"></span>
<ng-template #loadPage>
<span translate ngNonBindable [translateParams]="{ pageNo: paging.currentPage + 1 }">
Load page {{ pageNo }}</span
>
</ng-template>
</ng-container>
<ng-container *ngIf="isLoading">
<span *ngIf="loadingLabel; else loading" [innerHTML]="loadingLabel | translate"></span>
<ng-template #loading>
<span translate ngNonBindable [translateParams]="{ pageNo: paging.currentPage + 1 }">
Page {{ pageNo }} is loading…
</span>
</ng-template>
</ng-container>
</button>
<ng-container *ngIf="hasNoMoreData && !hideNoMoreDataHint && !isLoading">
<ng-container *ngTemplateOutlet="noMoreDataHint || finishHint"></ng-container>
</ng-container>
<ng-template #finishHint>
<div class="legend form-block center last-record" title="{{ 'Last record' | translate }}">
<i [c8yIcon]="'circle'"></i>
</div>
</ng-template>
<ng-container *ngIf="loadingTemplate && isLoading">
<ng-container *ngTemplateOutlet="loadingTemplate"></ng-container>
</ng-container>