core/common/load-more.component.ts
selector | c8y-load-more |
templateUrl | ./load-more.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
Accessors |
constructor(element: ElementRef)
|
||||||
Parameters :
|
class
|
Type :
Default value : |
container
|
Type : |
hidden
|
Default value : |
loadingLabel
|
Type : |
loadNextLabel
|
Type : |
maxIterations
|
Default value : |
noMoreDataHint
|
Type : |
paging
|
Type : |
useIntersection
|
Default value : |
onLoad
|
$event Type: EventEmitter
|
class |
class:
|
Async loadMore | ||||
loadMore(event?)
|
||||
Parameters :
Returns :
any
|
ngAfterContentInit |
ngAfterContentInit()
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
counter |
counter:
|
Type : number
|
Default value : 0
|
isLoading |
isLoading:
|
Default value : false
|
showNoMoreDataHint |
showNoMoreDataHint:
|
Default value : false
|
hasMore |
gethasMore()
|
<button
class="btn btn-default btn-block text-center"
(click)="loadMore($event)"
[ngClass]="{ 'btn-pending': isLoading }"
*ngIf="hasMore"
[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="showNoMoreDataHint">
<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>