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'
|
| 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"
type="button"
title="{{ 'Load more' | translate }}"
[ngClass]="{ 'btn-pending': isLoading }"
[style.visibility]="hidden ? 'hidden' : 'visible'"
[style.height]="hidden ? '1px' : null"
(click)="loadMore($event)"
*ngIf="hasMore && !(loadingTemplate && isLoading)"
>
<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>